YUI Autogrid: Correctly resize the grids
Date : 2008 06 26 Category : Tech & Development
AjaxianOur own Christian Heilmann has created a new JavaScript library Autogrid that marries YUI Grids, the base CSS library, to allow for smart resizing:
I love YUI Grids. I know my CSS and I know how to work around diff erent problems of browsers, but I am also very much bored about having to fix and test and create these workarounds over and over again. While YUI Grids might not be perfect for all cases of web development out there, I am happy to take a pragmatic approach and just create sites that can be done with them (now you also know why I am not a designer).
One problem I keep having when I put some YUI Grids-based sites live is that people complain about me expecting a certain screen resolution or viewport size. YUI grids can either be 100% wide, which can be pretty silly on high resolutions, or optimized for resolutions of either 800×600 or 1024×768. When you optimize for 800 pixels people on higher resolutions will complain about the length of the page and when you go for 1024 people will say they have to scroll to see your side-bar on 800×600. You can’t win.
Or can you? CSS is not dynamic — it has a fixed state and you can only hope that the browser does the right thing with what you give it (well, there are conditional comments for IE, but technically they are HTML, and of course there are media queries in CSS3 and other goodies, but for the sake of the argument let’s say supporting IE6 is a base). JavaScript, on the other hand, is very dynamic and you can read out and check what is happening to the browser currently in use and react to it.
Putting this feature of JavaScript to good use you can create a YUI-Grids-based layout that remains flexible and changes according to needs. All you need to do is use some YUI Dom magic and change IDs and classes accordingly.
Christian has a demonstration page, and the full code:
PLAIN TEXT JAVASCRIPT:YAHOO.example.autoGrid = function(){ var container = YAHOO.util.Dom.get('doc') || YAHOO.util.Dom.get('doc2') || YAHOO.util.Dom.get('doc4') || YAHOO.util.Dom.get('doc3') || YAHOO.util.Dom.get('doc-custom'); if(container){ var sidebar = null; var classes = container.className; if(classes.match(/yui-t[1-3]|yui-left/)){ var sidebar = 'left'; } if(classes.match(/yui-t[4-6]|yui-right/)){ var sidebar = 'right'; } function switchGrid(){ var currentWidth = YAHOO.util.Dom.getViewportWidth(); if(currentWidth> 950){ container.id = 'doc2'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6'; } } if(currentWidth <950){ container.id = 'doc'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5'; } } if(currentWidth <760){ container.id = 'doc3'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4'; } } if(currentWidth <600){ container.id = 'doc3'; container.className = ''; } }; switchGrid(); /* Throttle by Nicholas Zakas to work around MSIE's resize nasties. http://www.nczonline.net/blog/2007/11/30/the_throttle_function */ function throttle(method, scope) { clearTimeout(method._tId); method._tId= setTimeout(function(){ method.call(scope); }, 100); }; YAHOO.util.Event.on(window,'resize',function(){ throttle(YAHOO.example.autoGrid.switch,window); }); }; return { switch:switchGrid }; }();
We continue to see JavaScript libraries working with CSS to great effect.