Posted By

FatFolderDesigner on 09/24/11

Tagged

Versions (?)

Last Edited at 09/24/11 07:01am

Statistics

Viewed 911 times

Favorited by 0 user(s)

Related snippets

Flexible Site Layout with Resize Detection

/ Published in: JavaScript

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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');
	}
});