Enquire.js not working on page load, only works when screen <= 480px

Question

So I am using Enquire.js to add and remove bootstrap's pre-defined css classes for my website. Here is what I have:

Some bootstrap HTML thumbnails:

<div class="row">
  <div class="thumb thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
  <div id ="thumb" class="thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
</div>

I have set up the enquire.js so that the thumbnail sizes resize based on screen size as such:

<script type="text/javascript">

var $info = $('.thumb');

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

    match: function() {      
        $info.removeClass('col-xs-6');
        $info.addClass('col-xs-12');
    },


    unmatch: function() {
         $info.removeClass('col-xs-12');
         $info.addClass('col-xs-6');      
    }

    }).listen();

</script>

Problem:

The problem I am having is that the enquire.js code only kicks in once the screen size has been reduced to 480px or less.

So when the site is first loaded, the resize code won't work until I actually manually resize it down to 480px or lower and then you can see the resizing take place.

You can have a look at the site here

@RevanProdigalKnight What exactly have you tested? I have tested in all browsers and its not working — user3574492, Jul 26 '14 at 17:50

score 5 · Accepted Answer · answered Jul 26 '14 at 18:02

The unmatch function will only work when it goes from a matched state to an unmatched state.

I think you want to use the setup function as well. This will run the javascript inside when the handler is called. These are the four main calls from the enquire.js site

enquire.register("screen and (max-width:45em)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      

// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}

});

Yes, the setup function is what triggers the handler to start with. This works fine. Thank you!!! — user3574492, Jul 26 '14 at 18:06

Niklas · Answer 2 · 2014-07-26T18:05:03.877

3

I think you might need to have the code inside a document ready. Here using jQuery:

<script type="text/javascript">

    $(function() {

        var $info = $('.thumb');

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

        match: function() {      
            $info.removeClass('col-xs-6');
            $info.addClass('col-xs-12');
        },


        unmatch: function() {
             $info.removeClass('col-xs-12');
             $info.addClass('col-xs-6');      
        }

        });

    });

</script>

edited Jul 26 '14 at 18:05

answered Jul 26 '14 at 17:43

Niklas

1,729
1
12
19

Doesn't work... in fact with this code the enquire.js code doesn't work at all – user3574492 Jul 26 '14 at 17:50
Yes but I am using `enquire.js` in this case – user3574492 Jul 26 '14 at 17:52
My suggestion requires both. As specified in the answer. My suggestion is based in [this answer](http://stackoverflow.com/a/12789816/3877639). – Niklas Jul 26 '14 at 17:54
I have tried your suggestion and have tried wrapping the code in a `$(document).ready(function() {..}` but still does absolutely nothing – user3574492 Jul 26 '14 at 18:00
Which version of enqiure.js are you using? If you use v2, [.listen()is deprecated](http://wicky.nillia.ms/enquire.js/#v2.0.0), just remove it. – Niklas Jul 26 '14 at 18:02

Enquire.js not working on page load, only works when screen <= 480px

2 Answers2