Menu icon Foundation
Confusion around the changed.zf.mediaquery event

Hi there! I`m trying to hook up to the changed.zf.mediaquery which is works just fine but name name property seems the contain the size from the previous state(small,medium,etc..) and not the current one after the event.

So let say the original state was small and went up to medium the value of name is small, even if I use Foundation.MediaQuery.current

 $(window).on('changed.zf.mediaquery', function(event, name) {
    // Inital state small -> medium 
    console.log(Foundation.MediaQuery.current);
   //  'small'
    console.log(name);
    // 'small'
}
            

         

So my question is How can I get the current size?

F6eventsmedia query

Hi there! I`m trying to hook up to the changed.zf.mediaquery which is works just fine but name name property seems the contain the size from the previous state(small,medium,etc..) and not the current one after the event.

So let say the original state was small and went up to medium the value of name is small, even if I use Foundation.MediaQuery.current

 $(window).on('changed.zf.mediaquery', function(event, name) {
    // Inital state small -> medium 
    console.log(Foundation.MediaQuery.current);
   //  'small'
    console.log(name);
    // 'small'
}
            

         

So my question is How can I get the current size?

Robert Lewis almost 4 years ago

Hi Balazs,

Does this help?
https://github.com/alexanderholman/Respond

Robert

balazs sziklai almost 4 years ago

Thanks but not really! :)

I just want to understand how it`s working.

Adam Johnson almost 4 years ago

There's a better example in the Javascript Utilities section here: http://foundation.zurb.com/sites/docs/javascript-utilities.html#mediaquery

 $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    // Inital state small -> medium 
    console.log(newSize); // should return medium
    console.log(oldSize); // should return small
});

balazs sziklai almost 4 years ago

Thnx mate!

It`s funny because I checked the docs and under mediaquery the example is different.

It only shows two params...