$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
// Add some invisible elements with Bootstrap CSS visibile utility classes
$( "body" ).append( "<div style='visibility:hidden;' class='viewport-check'><span class='visible-xs-block'></span><span class='visible-sm-block'></span><span class='visible-md-block'></span><span class='visible-lg-block'></span></div>" );
// Checks if the span is set to display blcok via CSS
function checkIfBlock (target) {
var target = $(target).css('display') == 'block';
return target;
}
// Set some variables to use with the if checks below
var mediaQueryXs = checkIfBlock('.viewport-check .visible-xs-block');
var mediaQuerySm = checkIfBlock('.viewport-check .visible-sm-block');
var mediaQueryMd = checkIfBlock('.viewport-check .visible-md-block');
var mediaQueryLg = checkIfBlock('.viewport-check .visible-lg-block');
// Debug
console.log("extra small " + mediaQueryXs);
console.log("small " + mediaQuerySm);
console.log("medium " + mediaQueryMd);
console.log("large " + mediaQueryLg);
// Now check if the media query is enabled then add a unique class to the body tag
// Are you extra-small?
if ( mediaQueryXs == true ) {
$("body").toggleClass( "media-query-xs" );
$("h2").text( "media-query-xs" );
}
// Are you small?
if ( mediaQuerySm == true ) {
$("body").toggleClass( "media-query-sm" );
$("h2").text( "media-query-sm" );
}
// Are you medium?
if ( mediaQueryMd == true ) {
$("body").toggleClass( "media-query-md" );
$("h2").text( "media-query-md" );
}
// Are you large?
if ( mediaQueryLg == true ) {
$("body").toggleClass( "media-query-lg" );
$("h2").text( "media-query-lg" );
}
// Reload demo on window resize
$( window ).resize( function(){
this.location.reload();
});
// document ready
});