Disable jQuery Based on Screen Size

Question

I would like to disable the following JavaScript if a screen size is < 601px :

$(function() {
  function rotate() {
    $('#homemaincontent div').last().fadeOut(2000, function() {
      $(this).insertBefore($('#homemaincontent div').first()).show();
    });
   }
     setInterval(function() {
     rotate();
     }, 7000);
});

I found the following page with what seemed like a good answer, but I can't get it work:

Disable jquery function when screen width larger than 480

Answer 1

In case you want to detect the browser viewport:

if($( window ).width() > 601){
    // function
}

In case you want to detect the width of your HTML document:

if($( document ).width() > 601){
    // function
}

Based on your comment on another answer, you'd be able to add a static image instead like this:

$(function() {
    function rotate() {
        $('#homemaincontent div').last().fadeOut(2000, function() {
            $(this).insertBefore($('#homemaincontent div').first()).show();
        });
    }

    setInterval(function() {
        if($( window ).width() > 601){
            rotate();
        } else {
            var staticIMG =  document.getElementById('staticIMG');
            if (typeof(staticIMG) != 'undefined' && staticIMG != null){
                return false;
            } else {
                $("<img id='staticIMG' src='your/static/image.png'>").insertBefore($('#homemaincontent div').first()).show();
            }
        }
    }, 7000);
});

Answer 2

Include the following jQuery-plugin:

/*! viewportSize | Author: Tyson Matanich, 2013 | License: MIT */
(function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this);

And use it like this:

if (viewportSize.getWidth() > 600) {
//your function goes here
}

Answer 3

$(function() {
  function rotate() {
    $('#homemaincontent div').last().fadeOut(2000, function() {
      $(this).insertBefore($('#homemaincontent div').first()).show();
    });
   }
     setInterval(function() {
         if(Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > 601)
             rotate();
     }, 7000);
    });

so now each time rotate is called it will first check if the viewport width is more than 601 and if it is it will execute the function.

If you dont want to adjust for responsive behaviour you can just put that if statement to run at the begining of $(function(){ insert if () run rest of code else do nothing} and it will only evaluate once when your script runs for the first time

EDIT To answer about your 2nd question in the comment

Create a staticImageX css class and a DynamicImageX class that will have the needed css like position, width, top etc. Use jquery and the above expression to test against the width again and run jquery code to adjust the class on the image container on the same intervan as your rotate function So

if(width > 601)
    $('#imageContainer').addClass('DynamicImageX').removeClass('staticImageX')
else 
    $('#imageContainer').addClass('staticImageX').removeClass('DynamicImageX')**