Menu icon Foundation
javascript media queries

I need to detect media query using foundation, referring to http://foundation.zurb.com/docs/javascript-utilities.html#media-queries

heres the sample code:

$(document).foundation();
if (Foundation.utils.is_small_only) {
  alert('small');
}
            

         

The problem is, in desktop (chrome/firefox), i keep getting the "small" alert even im in a medium/large viewport. Is it a bug ? or am i missing something ?

thanks!

media queryjavascript

I need to detect media query using foundation, referring to http://foundation.zurb.com/docs/javascript-utilities.html#media-queries

heres the sample code:

$(document).foundation();
if (Foundation.utils.is_small_only) {
  alert('small');
}
            

         

The problem is, in desktop (chrome/firefox), i keep getting the "small" alert even im in a medium/large viewport. Is it a bug ? or am i missing something ?

thanks!

This post has been closed. No new replies can be added.

Bob Sawyer about 4 years ago

I think this might work. Haven't tested it, though:

 if (matchMedia(Foundation.media_queries['is_small_only']).matches){
  alert('small');
};

Danni about 4 years ago

nope. thats not working.

Rafi Benkual about 4 years ago
Rafi Benkual about 4 years ago

Some advice I found searching around:

Foundation.utils.is_small_only is a function, so putting it in a boolean will always return true, because the function exists
You need to call Foundation.utils.is_small_only() to actually evaluate the function that will return true or false

Chris Oyler about 4 years ago

Hi Danni,

When you say:

 if(Foundation.utils.is_small_only)

you're just checking to see if the Foundation object has that property, which it does. You need to call the function, so it'll return a value to evaluate, like so:

 $(document).foundation();
if (Foundation.utils.is_small_only()) {
  alert('small');
}

Hope that helps.

Chris

Danni about 4 years ago

You're right, my bad :)

Thanks !

Carlos Narro Diego over 3 years ago

This work for me:

You can use "show-for-small-only" class foundation. Visibility Classes

<body>
  [...]
  <div id="someContent" class="show-for-small-only">[...]</div>
  [...]
</body>

 

Then you can use this jQuery method:

$(document).ready(function(){
  var small = $("#someContent").is(":visible");

  if(small){
    //do something in small context
    console.log("small");	
  } else {
    //do something in small up context
    console.log("small up");
  }
});

 

Enjoy!