Advanced Search

Return to Snippet

Revision: 51439
at September 24, 2011 07:01 by FatFolderDesigner
Initial Code 
var sizeable = 'body,#content,#sidebar,#footer';
$(document).ready(function(){
	$(window).resize();
});
$(window).resize(function(){
	var width = parseInt($(window).width());
	// The following line was added for the example
	$('#currentsize').html(width);
	if(width<=320){
		$(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('tiny_screen');
	}else if( (width>320) && (width<=768) ){
		$(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('small_screen');
	}else if( (width>768) && (width<=1024) ){
		$(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('medium_screen');
	}else{//>1024
		$(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('large_screen');
	}
});
Initial URL 
http://fatfolderdesign.com/390/css/flexible-site-layout-with-resize-detection
Initial Description 
This bit of jquery will take whatever you give it in the selector (which should be a valid jquery selector of any kind) and add or remove additional classas as appropriate based on width. 

The width and style names are all determined by the last if statement and can easily be changes. The defaults are for sizes 320px or less, 321px to 768px, 768px to 1024px, and greater than 1024px to be given the styles tiny_screen, small_screen, medium_screen, and large_screen respectively.

More information plus some additional tips at the link, if you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and I’ll update with that information included as well.
Initial Title 
Flexible Site Layout with Resize Detection
Initial Tags 
javascript, jquery, layout
Initial Language 
JavaScript