0

I have a text widget, in it i just place there an iframe.

A few days ago i wanted to override this widget on mobile browsers and add a background of an image on mobile browsers, luckily i used How to hide widget on mobile , i changed the code from that link instead of hiding the widget on mobile i simply give it a background image.

Now my questions is how can i add an onclick function to this widget, for example when this widget is clicked on a mobile browser i call a shortcode.

Any code examples of how to add some javascript to a text widget so that when it is clicked i call a shortcode.

  • 1
    a shortcode can only be used by WordPress and JavaScript code can only interact with WordPress through a HTTP request. So when you say "a clic call a shortcode" it's not clear, please add more details to explain what you want – mmm Mar 24 '16 at 9:05
0

I am not entirely sure what your setup is, but you could probably use jQuery to add a on('click') to the iframe element.

perhaps:
$(iframe).on('click',function(){
window.location = "http://www.yoururl.com";
})
|improve this answer|||||
  • You can echo the contents of a shortcode into javascript too. like so: <script> var my Var = "<?php echo do_shortcode('[myshortcode]') ?>" </script> – RiaanP Mar 24 '16 at 9:17
0

Download mobble plugin, this will enable you to Start doing some RESS (Responsive server side). This plugin is very light weight and quite nice to use, it also adds the user agent and browser info on the body class of all your pages. Hence you can simply do for your widget:

.mobile .myWidget{
display: none;
}
.desktop .myWidget{
// whatever }

.tablet .myWidget{
// whatever }

It also gives you booleans to use in your php code:

if(!is_mobile){
// code to display widget sidebar?
}

If you do end up using these booleans and you use a caching plugin such as w3 Total Cache, make sure you activate the User Agent mode so your server makes a different copy for each user agent. This way, you make sure a desktop doesn't get a mobile version and vice versa.

|improve this answer|||||
0

Finally all i had to do is specify the mobile custom css code, i give it a name then make it only visible to mobile (800width and above are not mobile, probably tablet, pc e.t.c)

@media only screen 
and (max-width : 800px) {

.media{ display: none; }

}


@media only screen 
and (min-width : 800px) {


.vid{
    display: none;
}   

}

Then from my widget i add the image background pointing to a custom function i put in the header.php

<img class="vid" onclick="myFunction();" src="http://www.domain.com/wp-content/uploads/2016/03/button.png"  />
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.