Wednesday, September 12th, 2007
Christian recently had to tackle a problem where ensuring that the layout for an ad campaign just wasn’t as easy as expected:
One of these problems we came across recently was that an advertising campaign had a small banner in one column of the layout and a large banner in another column. This wouldnâ€™t be a problem, but the ads required that the banners line up on the bottom for the â€œwowâ€ effect to happen. The problem is clear to anyone who ever worked in a web environment with third-party-maintained content.
The 3rd party content was causing the layout to shift depending on the font size and data elements being presented.
Christian and the Yahoo team leveraged CSS and the YUI Dom Collectionâ€™s Region methods to control the layout:
So by leveraging methods of the Region class, they were able to dynamically adjust the elements of the page to ensure that the layout remained consistent, irregardless of what was passed by the 3rd party:
This little gem in the YUI allows you to read out the position and size of an element on the screen at any moment in time regardless of its positioning. Region works the same for absolutely, relatively or statically positioned elements, all it expects is the element to be available and not hidden with display:none.
Posted by Rey Bango at 7:30 am