How to disable javascript for responsive design

Question

I have been using supersized jQuery for the slideshow background of my website. I am making the website responsive and using css media queries.

I would like to be a

Answer 1

You can detect the screen width with JavaScript, using screen.width, and then determine what you want to do from there.

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

Wrap all of your animations and all the code you don't want to run inside the else block for cases where the screen size is less than 480.

As a word of caution, IE tends to do things different, and I don't have IE to test, so you may want to run screen.width there and adjust for any differences, if necessary. But in Chrome, screen.width returns 1280, which is the correct width for my screen.

Answer 2

As @Pointy noted in the comments, modernizr allows you to call media queries from javascript. Read the modernizr documentation

Answer 3

You could set a hidden div with some css rules within a media query, then check those css attributes with jQuery's css() and based on that turn your slideshow on or off. Specifically:

@media all and (max-width: 480px) {
    #testdiv{
        display:none;
    }
}

And js:

if($("#testdiv").css("display") == "none"){
    $.supersized({...});
}

Note that this is essentially using the Modernizr approach without actually getting the library.

Answer 4

As others mentioned, there are plenty of jQuery plugins you can use. However, if all you want to use is just plain vanilla jQuery you can also do what you want.

You can use the resize method in jquery to detect the size of the window.

$(window).resize(function() {
   if ($(this).width() > 480) {
      // call supersize method
   }
});

Then on doc ready, just be sure to call the resize window so it will initially call or not call the method depending on your window's current size:

$(document).ready(function() {
   $(window).resize();
});

PS > If you do not need this script to run every time the window resizes, but rather only when it reaches below 480 pixels, slight modifications can be made to unbind the resize method after your script needs to be disabled or enabled.

Answer 5

jRespond, a script released by Viget allows you to control JavaScript based on viewport size:

Article: http://viget.com/inspire/managing-javascript-on-responsive-websites

Code: https://github.com/ten1seven/jRespond

Answer 6

I think the solution of Asad is the best or you use modernizr. Because you have the breakpoint definition (480px) in a single file and not in JS and in CSS. If you use SCSS you have only one definition for the breakpoint in a variable.