Skip to content

Instantly share code, notes, and snippets.

@postpostmodern

postpostmodern/width_classes.js

Created January 12, 2012 21:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save postpostmodern/1603406 to your computer and use it in GitHub Desktop.
Save postpostmodern/1603406 to your computer and use it in GitHub Desktop.
Download ZIP
Add classes to <html> for responsive layouts
Raw
width_classes.js
// 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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment