Triggering jquery with css media queries

Question

I am using css media queries on my project to create a site that will work with any sized screen. I am looking to trigger difference jquery functions just like I would with css.

For example, If the browser size is between 1000px and 1300px, I would like to call the following function:

$('#mycarousel').jcarousel({
    vertical: true,
    scroll: 1,
    auto: 2,
    wrap: 'circular'
});

BUT when the browser size is below 1000px, the js would stop its processing. So on and so forth.

I'm not sure if this is possible, but perhaps there is an existing solution or plugin that creates different js environments based on browser window sizes. I suppose I could create conditional statements in some format. Any thoughts?

Answer 1

The Modernizr library supports making direct JavaScript calls that evaluate media queries.

If you don't want to do that, you could have your different CSS rules drive some property of a hidden element, and you could then use ".css()" to check the value from jQuery. In other words, the rule for "bigger than 1000px wide" could set a hidden <div> to "width: 1000px", and you could then check

if ( $("#widthIndicator").css("width") === "1000px") {
  // whatever

Here is a dumb jsfiddle demonstrating. Drag the middle separator bar left and right to see that the JavaScript code (in the interval timer) detects the change to effective "width" of the hidden element.

If you refer to a responsive design then you could also trigger an existing element's property without adding markup to your html,for example

if ( $("#navigation li").css("float") === "none") {

Answer 2

Using Modernizr, as Pointy pointed out, is pretty easy.

Add the following javascript:

$(document).ready(function() {
    function doneResizing() {
        if(Modernizr.mq('screen and (min-width:768px)')) {
            // action for screen widths including and above 768 pixels 
        }
        else if(Modernizr.mq('screen and (max-width:767px)')) {
            // action for screen widths below 768 pixels 
        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();
});

That way the Modernizr Mediaquery detection is run ALSO when you resize the browser window - not only when the document gets loaded initially!

Answer 3

I had a similar problem with some carousels that must be created on mobile, but destroyed in desktop... and I did not liked the solution of being checking window width in pixels, so I created a small function to "listen" when the mediaquery state changes, without the need of Modernizr.

You can define your own code in every state ("on entering mobile resolution", "on leaving desktop")... and there put your code.

Hope could be useful for someone else ;)
https://github.com/carloscabo/MQBE
(improvements and ideas are welcome ;)