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 would wrap CSS in Media Queries).

I'm not quite sure how to use it. This tutorial says this:

enquire.register("max-width: 960px", function() {
  // put your code here
});

However, when I follow that, my code stops working.

Here is an example of some Jquery Tabs without Enquire.JS. It works fine.

Here are the same tabs, but with Enquire.JS added. Now it stops working.

I've experimented with different variations of the code, but none of them work. What am I doing wrong?

I think you might have place the Jquery Tab code in a separate file and then link to that file from within Enquire.Js, but I'm not sure how you would do that. (Although it would be handy to know as I'd imagine it would let you keep your scripts be more reusable).

PS. This is not a criticism of Enquire.Js. I know that the problem lies squarely with my lack of proficiency in Javascript! I did spend a couple of hours searching for a solution, but couldn't find anything.

Thanks for any help!

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