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

Answer 1

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 ;)

Answer 2

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 3

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!