Posted By

aznprncritic on 02/04/07


Tagged

css javascript html browser dynamic layout resolution liquid


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

jonhenshaw
Hirmine
basicmagic
vali29
buscarini


Dynamic Resolution Dependent Layoutout


 / Published in: JavaScript
 

URL: http://particletree.com

A great script that will serve up stylesheets based on browser viewport size.

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

Report this snippet  

You need to login to post a comment.