enquire.js javascript doesn't execute (enquire.js, Modernizr, jQuery)

StackOverflow https://stackoverflow.com/questions/20314068

Question

I'm trying to add Modernizr and enquire.js to my website for a cleaner mobile implementation that only loads desktop content when the desktop media query actually applies, rather than just hiding it. However, my attempt is already blocked by the fact that enquire.js doesn't seem to work at all.

It seems I have managed to get Modernizr to run properly, since my unrealsp.js is loaded (the dropdown menu-related part of the code works fine), but the code in the enquire.js part is never executed no matter what I do. Any help would be quite appreciated.

My HTML code:

<head>
    <!-- [...] -->
    <!--[if lt IE 9]>
    <script src="includes/html5shiv.js"></script>
    <![endif]-->
    <script src="includes/js/modernizr.min.js"></script>
</head>

<!-- [...] -->

<script type="text/javascript">
Modernizr.load([
    {
        test: window.matchMedia,
        nope: "includes/js/media.match.min.js"
    },

    "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
    "includes/js/enquire.min.js",
    "includes/js/unrealsp.js"
]);

My "unrealsp.js" code:

$(document).ready(function(){
    $("ul.topmenu li a").click(function(event) {
        var element = $(this).parent().find("ul.submenu");
        //Following events are applied to the submenu itself (moving submenu up and down)
            $(this).parent().parent().find("ul.submenu").not(element).slideUp();
            element.slideToggle(); //Drop down the submenu on click }
    });

    enquire.register("screen and (min-width:62em)"), {
    match : function() {
        alert("Matched!");
    },
    unmatch : function() {
        alert("Unmatched!");
    } 
}
});

Console output of an error in enquire.min.js (I'm using the newest one):

Uncaught TypeError: Cannot read property 'deferSetup' of undefined enquire.min.js:7
s enquire.min.js:7
o.addHandler enquire.min.js:7
(anonymous function) enquire.min.js:7
i enquire.min.js:7
r.register enquire.min.js:7
(anonymous function) unrealsp.js:9
c jquery.js:7341
p.fireWith jquery.js:7403
b.extend.ready jquery.js:6875
H jquery.js:6601
Was it helpful?

Solution

You've closed the enquire.register() method too quickly.

Here's the working code:

enquire.register("screen and (min-width:62em)", { // <-- the bracket was here
  match : function() {
    alert("Matched!");
  },
  unmatch : function() {
    alert("Unmatched!");
  } 
}); // Note the closing round bracket here
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top