1

i need to call a javascript only if screen resolution is greater than 500.

I found below code...

<script type='text/javascript' src='<?php echo $urlPlugin?>js/jquery.themepunch.revolution.min.js?rev=<?php echo RevSliderGlobals::SLIDER_REVISION; ?>'></script>

So, i modified it as below...

<script>
if (window.innerWidth > 500) {
    var head = document.getElementsByTagName('head')[0];

    var s1 = document.createElement("script");
    s1.type = "text/javascript";
    s1.src = "http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js";
    head.appendChild(s1);
}
</script>

However that did not work.

Later i came to know about enqueue function. i have lines as following...

wp_enqueue_script('revmin', RS_PLUGIN_URL .'public/assets/js/jquery.themepunch.revolution.min.js', 'tp-tools', $slver, $ft);

this function auto-calls scripts. so, how do i make it conditional??

instead of enqueueing script i used register_script so that the script can be called later.

Which is working. Then placed javascript code in header.php

However unable to call script if screen is greater than 500.

Also tried this...

 <script>
 if( $(window).width() > 500 )
 {
 $.ajax({
 url: 'http://domain.com/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js',
 dataType: "script",
 success: function() {
    //success
 }
 });
}
</script>
  • Edit your JS file to append the conditional to it to execute only when window.innerWidth > 500 and add it with wp_enqueue_script – Samuel Elh Apr 29 '17 at 23:57
  • @SamuelElh tried a way, but did not work. Question updated. – Kishor Parmar Apr 30 '17 at 8:31
0

You don't make it conditional on the server side, you just do not initialize/run it on client side when you detect that the width of the window is smaller than 500 pixels.

Trying to detect screen dimension on server side is a big no-no and can fail in all kind of ways (caching, window size change, and probably more).

  • so, what is the way out if ? – Kishor Parmar Apr 29 '17 at 17:04
  • I don't understand what you mean @KishorParmar – Mark Kaplun Apr 29 '17 at 17:17
  • if 1) don't make it conditional on the server side 2) you just do not initialize/run it on client side........ 3) Trying to detect......is a big no-no then what is the solution? How to achieve? – Kishor Parmar Apr 29 '17 at 17:24
0

you can use Window matchMedia() Method https://www.w3schools.com/jsref/met_win_matchmedia.asp like this:

 <script type="text/javascript">
        if (matchMedia('only screen and (min-width: 500px)').matches) {

    }
    </script>
0

You cannot make it conditional on the server. Follow the steps below.

  1. Enqueue the script in the regular way. I suppose, your code is correct for this- wp_enqueue_script('revmin', RS_PLUGIN_URL .'public/assets/js/jquery.themepunch.revolution.min.js', 'tp-tools', $slver, $ft);

See this for better understanding: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

  1. In your JS, use the condition if( $(window).width() > 500 ) { $.ajax({ data: { 'action' : 'your-action', 'other_key' : other_value }, url: ajaxurl, // previously defined. type: 'POST', success: function(data){ // so something } }) }

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.