Add HTML classes to body element when window resizes
/**
* Add classes to the DOM based on the current media query size defined by Foundation breakpoints.
*/
(function fdnMQClasses( window, document, $, undefined ) {
var foundationPrefix = 'fdn-size-';
// Add the class on page load.
$( document ).ready( function () {
$( 'body' ).addClass( foundationPrefix + Foundation.MediaQuery.current );
} );
// Change the class when the mediaquery is updated.
$( window ).on( 'changed.zf.mediaquery', function ( event, newSize, oldSize ) {
// Bail early if nothing's changed.
if ( newSize === oldSize ) {
return;
}
$( 'body' ).removeClass( foundationPrefix + oldSize ).addClass( foundationPrefix + newSize );
} );
})( window, document, jQuery, null );