How to use Enquire.Js?

Question

Enquire.js is a Javascipt that re-creates CSS media queries for Javascripts. This means you can wrap your Javascripts in Media Queries. (Just like you woul

Answer 1

EDIT: enquire.js v2 is now out and the documentation includes working examples

I know you asked me on GitHub about better documentation in general, but I came across this question here so thought I'd try to help with the specific problem you're having here as well.

Your original code was as so:

enquire.register("max-width: 500px", function() {

    $(document).ready(function() {
        $("#tabs").tabs();
    });

}).listen(); //note: as of enquire.js v2 listen() has been deprecated

There's a few small issues with this which I'll explain now. The most obvious is that you have placed the document ready callback inside the match function. Whilst this may actually work perfectly fine, it would be considered better practice to instead have all the enquire code inside the ready callback:

$(document).ready(function() {

    enquire.register("max-width: 500px", function() {
        $("#tabs").tabs();
    }).listen(); //note: as of enquire.js v2 listen() has been deprecated

});

This is a better approach because you don't have to add a register callback in every match function (if you have more than one handler or more than one query.

The second, more subtle, problem is that your media query is not considered valid. Any media query feature must be surrounded by parentheses. Also you typically want to specify a media device (briefly covered here: http://www.w3.org/TR/css3-mediaqueries/#background), usually you would pick screen for websites. The media device and media query feature you're testing for are then separated by an and:

$(document).ready(function() {

    enquire.register("screen and (max-width: 500px)", function() {
        $("#tabs").tabs();
    }).listen();

}); //note: as of enquire.js v2 listen() has been deprecated

That should then be all that is required to fix your code. You can see a completed example here: http://jsfiddle.net/WickyNilliams/3nXce/

Hope that helps :)