public
Created

Add classes to <html> for responsive layouts

  • Download Gist
width_classes.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
// Add classes to <html> for responsive layouts -
// e.g. <html class="over320 over480 under768 under960">
 
jQuery(function() {
var widths = [ 320, 480, 768, 960 ];
var setWidthClasses = function() {
var w = $(window).width();
for(var i=0; i<widths.length; i++) {
$('html').removeClass('under' + widths[i]).removeClass('over' + widths[i]);
}
for(var i=0; i<widths.length; i++) {
if(w < widths[i]) $('html').addClass('under' + widths[i]);
if(w > widths[i]) $('html').addClass('over' + widths[i]);
}
};
setWidthClasses();
$(window).on('resize', setWidthClasses);
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.