Destroying a function when exiting a matched breakpoint with enquire.js

Question

This is probably basic to most reading, but I can't seem to figure it out.

I have a little test function that I want to execute if under a certain width. When the screen rotates or gets resized above that width, I want the function to cease to work. Here is some example code for simplicity sake.

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    }
}).listen();

So if the page loads above 500px, it works as intended. Clicking won't execute. If the page loads at 500px or below, the click function executes. Only problem is that if you resize the viewport or change orientation to something above 500px, the function still executes. I'd like to be able to disable that.

The real world scenario I'm actually trying to do here is I have an un-ordered list of 4 items. Above a certain width they are displayed right away. If under a certain width, I just want to hide them and on click show them. I know there are a few ways to do it (.toggle(), .toggleClass("myclass"), etc).

I have done this a bunch of times but I always get caught with the entering / exiting break points and things not being reset, or working as intended. Usually it doesn't matter, but lately in some of my use cases it has mattered.

I know of the unmatch option but I'm not sure how to really kill the matched function above.

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    },
    {
        unmatch : function() {
        // what do I do here do kill above?
        }
    }
}).listen();

Any help would be appreciated. I am pretty sure it will help my current situation but will also help me expand my knowledge of enquire.js for other things.

Thanks.

edit: I forgot to mention... if you load the page under 500px, then resize or orientate wider then 500px, then go BACK under 500px, the click function won't work again.. which confuses me also. I basically was hoping it would work no matter what when under 500px, and not work at all when over 500px.

Answer 1

I'm the author of enquire.js, so hopefully I'll be able to help you ;-)

Basically, you want to add an event handler on match and remove event handler on unmatch. You seem to have the gist of how to do this above, but you've got the syntax a little wrong. Once the syntax is corrected it's just some jQuery knowledge to remove the click handler.

So let's look at how the syntax should be:

enquire.register("screen and (max-width:500px)", {
    match: function() {
        //match code here
    },

    unmatch: function() {
        //unmatch code here
    }
}).listen();

Notice that match and unmatch are part of a single object supplied to register.

Ideally you should be putting this in your document ready callback. To assign your click handler use jQuery's on method, as this allows you to use the off method to unassign:

$(".block .block-title").on("click", function() {
    alert("hello");
});

$(".block .block-title").off("click");

This is great because you can even namespace your events, read up on the jQuery docs for more details on this. So to put it all together, we would have this:

$(document).ready(function() {

    var $target = $(".block .block-title");

    enquire.register("screen and (max-width:500px)", {
        match: function() {
            $target.on("click", function() {
                alert("Hello World!");
            });
        },
        unmatch: function() {
            $target.off("click");
        }
    }).listen();
});​

You can find a working example here: http://jsfiddle.net/WickyNilliams/EHKQj/

That should then be all you need :) Hope that helps!