Question

I would like a function to be called only when the browser is greater than 640px. So far I have the following, which successfully loads the function when the screen width is greater than 640px but the problem I’m facing, is that when the browser width goes back under 640px, the function is still active. In my particular scenario I do not want the function loading on smaller displays, hence why I’m trying to call it using the below code. How can I somehow remove/destroy the function when the browser is resized back under 640px?

<script> 
    function someFunction() {
     // .. does something when the browser width is greater than 640px
    }

    (function($){
          //detect the width on page load and load the function
          $(document).ready(function(){
             var current_width = $(window).width();

               if(current_width > 640){
                 someFunction();
               }
            }
          });

          //update the width value when the browser is resized
          $(window).resize(function(){
            var current_width = $(window).width();

            if(current_width > 640){
                someFunction(); 
            }

          });

        })(jQuery);
</script>

Here’s a full jsFiddle example of what I have so far as per the help I have had so far. http://jsfiddle.net/7Dqna/26/

I’m implementing a sticky sidebar that scrolls with the page when it hits the top of the browser but I am trying to turn off the function at smaller screen sizes (think mobile).

It works when the page is refreshed, but if you make the browser window bigger, then smaller (less than 400px in the jsFiddle example) the menu still is still given the CSS by the function. So I guess it’s not picking up the resize thingie.

Answer 1

$(document).ready(function(){
     $(window).on('load resize', ifWidth);

     function ifWidth() {  
         var W = $(window).width();
         if(W > 640){
             someFunction();
             $(window).off('resize', ifWidth);
         }
     }

     function someFunction() {
         // .. does something when the browser width is greater than 640px
     }
});
​