How to trigger on load about enquire.js

[damassi]

For those arriving here through google I want to point out that both listen and fire have been removed from the API in v2 of Enquire

[WickyNilliams]

Yo! Not a noob question at all, don't worry, I'm happy to help.

The simple answer is just call fire or listen - this will cause all media queries registered thus far to be evaluated, and if you've called listen, all media queries will be reevaluated whenever a browser resize/orientation change event is raised. Usually you'll want to do this is a document ready callback e.g.

$(function() {

    enquire.register("screen and (min-width:500px)", function() {
        alert("wassup?");
    }).listen();

});

Now onto the little note! The little note can be explained with the following scenario: Imagine we'd written the code above and had it run in a browser starting at a width of 600px.

On load the query is evaluated, it matches so the alert is shown, and the media query will be considered to be in a matched state. If you then resize the browser up to a width of 700px, the media query will be re-evaluated, it matches again but because the media query is already in a matched state, the callback is not triggered again.

If you then resize the browser down to 400px, the query is re-evaluated, it no longer matches, so is now in an unmatched state (if we'd supplied an unmatch callback this would have been triggered here as the query transitioned from an matched state to a unmatched state). You then resize your browser up to 500px, the media query is re-evaluated, it now matches and because the query transitioned from an unmatched to a matched state the alert is finally shown again.

Hopefully that clears everything up :)

[struiling]

Appreciate your quick response!

However, I think I'm missing something about the document ready callback. So here's my function, which triggers fine on change. Am I not calling it correctly? I'm sure it's something really basic I'm missing.

function media_queries() {
    enquire.register("screen and (max-width: 959px)", [{
        match : function() {
            jQuery('#main').append(jQuery('.basics-side'));
        },

        unmatch : function() {
            jQuery('aside').append(jQuery('.basics-side'));
        }
    }]).listen(); 
}

jQuery(document).ready(function() {
    media_queries();
});

[WickyNilliams]

Everything looks OK with your code on the surface of it, so maybe there is a bug somewhere. Could you create a jsfiddle with the markup markup and stuff in place, I can dive into it a bit further then.

[struiling]

D'oh, in the process of creating the fiddle I figured it out. It actually had to do with multiple media queries. Instead of chaining, I was calling enquire.register two separate times, which resulted in the weird behavior (I had foolishly stripped it out in the code example I gave earlier).

It's in the documentation, but here's the correct way for anyone else who might stumble across this:

    enquire.register("screen and (max-width: 768px)", {
        // code
    }).register("screen and (max-width: 959px)", {
        // code
    }).listen();  

Thanks for your help, and for your awesome work!

[WickyNilliams]

Haha its often the way, you don't imagine the problem being completely trivial so you don't even consider the simpler parts of your code as the source of error. Glad to hear all is solved though :-)

You're not required to chain methods mind you, so if you encountered issues with unchained methods there may be something for me to investigate yet. If the unchained approach looks like it should work, but strangely doesn't let me know and I'll delve into it.

Thanks for the kind words. For now I'll close this issue.

[okadots]

@damassi THANK YOU. I couldn't figure out why this wasn't working...

For those looking for this answer (I didn't see it right away in the documentation, but it's there!) --
you can use setup.

setup : function() {},

[WickyNilliams]

As of v2, listening is the default, so just registering a query is enough

[okadots]

Perhaps I am doing something wrong because it will not load the unmatched case if I open this in a browser wider than 1024px. I should be getting a console log that says "large", but that only happens when I change the browser size. I even tried switching the cases and changing the media query to min-width 1024px.

enquire.register('screen and (max-width:1024px)', {
match: function() {
$('.menu').click(function(){
$('header').toggleClass('open');
$('.nav_items').slideToggle(300)
});
console.log('small')
},
unmatch: function() {
menu.initSlider();

    $(window).resize(function() {
        menu.onResize();           
    });     
    $('header').removeClass('open');
    $('.nav_items').removeAttr('style')
    console.log('large')


    }
});