Discovering the foundation of small / large use in Javascript

Question

Is there a way to determine if the Foundation grid is in small or large mode using Javascript?

Answer 1

Yes, you can create a function like this:

var isLarge, isMedium, isSmall; isSmall = function() { return matchMedia(Foundation.media_queries['small']).matches && !matchMedia(Foundation.media_queries.medium).matches; }; isMedium = function() { return matchMedia(Foundation.media_queries['medium']).matches && !matchMedia(Foundation.media_queries.large).matches; }; isLarge = function() { return matchMedia(Foundation.media_queries['large']).matches; }; 

Then name it like this:

 if (isSmall()) { alert("Too small!"); } if (isLarge()) { alert("Too big!"); } if (isMedium()) { alert("Just right!"); } 

Another way that is not basic:

In your query for CSS multimedia, just for small (adapt):

 @media only screen and (max-width: 40.063em) { body:after { content: 'small'; display: none; } } 

In your Javascript, use a function to get the contents of this element and compare it:

 var getSize; getSize = function() { return window.getComputedStyle(document.body, ':after').getPropertyValue('content'); }; 

In some browsers, getSize () will return the value that is being quoted, so using if (getSize () == "small") does not work. You can get around this using this for comparison:

 if (getSize().indexOf("small") !== -1) { // do something } 

Subscribe to this blog post for this method: http://adactio.com/journal/5429/

Answer 2

By default, Foundation5 methods are used that process available requests:

 // Small queries Foundation.utils.is_small_only(); Foundation.utils.is_small_up(); // Medium queries Foundation.utils.is_medium_only(); Foundation.utils.is_medium_up(); // Large queries Foundation.utils.is_large_only(); Foundation.utils.is_large_up(); // XLarge queries Foundation.utils.is_xlarge_only(); Foundation.utils.is_xlarge_up(); // XXLarge queries Foundation.utils.is_xxlarge_only(); Foundation.utils.is_xxlarge_up(); 

See "Media Queries" at http://foundation.zurb.com/docs/javascript-utilities.html .

Answer 3

There is actually a better way:

 if (Foundation.MediaQuery.atLeast('medium')) { // True if medium or large // False if small } 

More info here .

Answer 4

You can use the Adaptive Bootstrap Toolkit Library , which, despite its name, works only with any frames, including Foundation. Breakpoint detection will look like this for Foundation:

 (function($, viewport){ viewport.use('Foundation'); if( viewport.is('small') ) { console.log('Matching: small'); } if( viewport.is('>=medium') ) { console.log('Matching: medium, large and xlarge'); } // You can also create a listener with debouncing that will perform an action // whenever window size changes. $(window).resize( viewport.changed(function(){ console.log('Current breakpoint:', viewport.current()); }) ); })(jQuery, ResponsiveBootstrapToolkit); 

Disclaimer: I am the author of the specified library.