Advanced Search

Dynamic Resolution Dependent Layoutout

/ Published in: JavaScript
Save to your folder(s)
A great script that will serve up stylesheets based on browser viewport size.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // - - - - - - - - - - - - - - - - - - - - -
  2. //
  3. // Title : Dynamic Resolution Dependent Layout Demo
  4. // Author : Kevin Hale
  5. // URL : http://particletree.com
  6. //
  7. // Description : This is a demonstration of a dynamic 
  8. // resolution dependent layout in action. Change your browser 
  9. // window size to see the layout respond to your changes. To 
  10. // preserve the separation of the presentation and behavior 
  11. // layers, this implementation delegates all the presentation 
  12. // details to external CSS stylesheets instead of changing 
  13. // each style property through JavaScript.
  14. //
  15. // Created : July 30, 2005
  16. // Modified : November 15, 2005
  17. //
  18. // - - - - - - - - - - - - - - - - - - - - -
  19.  
  20. // getBrowserWidth is taken from The Man in Blue Resolution Dependent Layout Script
  21. // http://www.themaninblue.com/experiment/ResolutionLayout/
  22. 	function getBrowserWidth(){
  23. 		if (window.innerWidth){
  24. 			return window.innerWidth;}	
  25. 		else if (document.documentElement && document.documentElement.clientWidth != 0){
  26. 			return document.documentElement.clientWidth;	}
  27. 		else if (document.body){return document.body.clientWidth;}		
  28. 			return 0;
  29. 	}
  30.  
  31. // dynamicLayout by Kevin Hale
  32. function dynamicLayout(){
  33. 	var browserWidth = getBrowserWidth();
  34.  
  35. 	//Load Thin CSS Rules
  36. 	if (browserWidth < 750){
  37. 		changeLayout("thin");
  38. 	}
  39. 	//Load Wide CSS Rules
  40. 	if ((browserWidth >= 750) && (browserWidth <= 950)){
  41. 		changeLayout("wide");
  42. 	}
  43. 	//Load Wider CSS Rules
  44. 	if (browserWidth > 950){
  45. 		changeLayout("wider");
  46. 	}
  47. }
  48.  
  49. // changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
  50. // http://www.alistapart.com/articles/alternate/
  51. function changeLayout(description){
  52.    var i, a;
  53.    for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
  54. 	   if(a.getAttribute("title") == description){a.disabled = false;}
  55. 	   else if(a.getAttribute("title") != "default"){a.disabled = true;}
  56.    }
  57. }
  58.  
  59. 	//addEvent() by John Resig
  60. 	function addEvent( obj, type, fn ){ 
  61. 	   if (obj.addEventListener){ 
  62. 	      obj.addEventListener( type, fn, false );
  63. 	   }
  64. 	   else if (obj.attachEvent){ 
  65. 	      obj["e"+type+fn] = fn; 
  66. 	      obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
  67. 	      obj.attachEvent( "on"+type, obj[type+fn] ); 
  68. 	   } 
  69. 	} 
  70.  
  71. 	//Run dynamicLayout function when page loads and when it resizes.
  72. 	addEvent(window, 'load', dynamicLayout);
  73. 	addEvent(window, 'resize', dynamicLayout);

URL: http://particletree.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.