crazy4groovy
1/31/2012 - 4:48 PM

adaptive html layout via css body class

adaptive html layout via css body class

window.onload   = setScreenClass; // may break $(document).ready()?
window.onresize = setScreenClass;

	//	credit: http://www.alistapart.com/articles/switchymclayout
	//	example: http://paulwreid.com/about/
	//	Following transition classes will be declared:
	//
	//	classname		  screenwidth
	//	------------------------------------------
	//	pda_ver			  240px
	//	pda_hor			  320px
	//	screen_ultralow		  320px -  640px
	//	screen_low		  640px -  800px
	//	screen_med		  800px - 1024px
	//	screen_high		  1024px - 1280px
	//	screen_wide		> 1280px

function setScreenClass(){
	var fmt = document.documentElement.clientWidth;
	var cls = (fmt<=240)?'pda_ver':(fmt<=320)?'pda_hor':(fmt<=640)?'screen_ultralow':(fmt<=800)?'screen_low':(fmt<=1024)?'screen_med':(fmt<=1280)?'screen_high':'screen_wide';
	//document.getElementById('count').innerHTML=fmt+'px -> '+cls;//for UI display
	document.body.className=cls;
};