Wednesday, September 12th, 2007

YUI Dom Collection’s Region methods to the rescue!

Category: CSS, JavaScript, Yahoo!

One of the reason’s I like reading articles by Christian Heilmann is because of his innovative solutions to common problems and his ability to clearly explain the rationale behind the solutions. I was first exposed to this when I was reading his book, Beginning JavaScript with DOM Scripting and Ajax. I became a fan then and continue to enjoy his articles.

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:

CSS + JavaScript Solution:

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

3.3 rating from 23 votes


Comments feed TrackBack URI

It is often useful to support complex layout by fixing issues like IE’s (lack of) min-height with JS. However, from reading the solution it seems that the issue is how to solve this complex layout issue without having control over much of the site’s css

we could have used margin or padding on the ads, but who is to say they don’t already have a margin?

You, the layout designer is who! If you don’t have control over the margin and padding on a DIV, no wonder this is difficult.

var ad_one = YAHOO.util.Dom.get('adblock1');

Also, if you know the id of an element, what is the point of not using (the faster) document.getElementByID?
Unfortunately, like many of the YUI demos I’ve seen, this seems to be overkill for the sake of example, but I have lost the meaning in the meantime. This just seems to be a plug for the YUI YAHOO.util.Dom.getRegion(), which is cool, but Prototype has the Position object and jQuery has the Dimensions plugin (and offset() is now in the 1.2 core), so this is not new tech. Furthermore, there are techniques to achieve his target layout in pure CSS (with zIndex and div layers) – but you have to have control over the document’s CSS.

Comment by Charles — September 12, 2007

@Charles if you read more closely you will realize that the content that gets written out to the element with the ID is generated by a third party ad provider with a JS include, so we do NOT know the padding and margin. We could bump up the specificity of a selector to ridiculous proportions to override anything that comes in but that to me is less clean. Online ads are a big issue and you don’t have control over them in the way we should.

As to DOM.get, if you look in the code of that you’ll see that if the provided parameter is a string it immediately returns getElementById, so there is not much of an overhead there, but it makes it easier for me to have a consistent get() for the cases of a single element, a group of elements or a reference.

The point of this was not to show off that YUI is better than others, the point was to solve a problem we had.

As to “You, the layout designer is who! If you don’t have control over the margin and padding on a DIV, no wonder this is difficult”: To me, this is called web design, if you don’t plan for layouts to change due to dynamic parts and content sections you don’t design for the web. I said in the first paragraph that this need for layout out element in different columns flush bottom should never be needed, but as you can see there are situations where it is.

As to your point that this can be done purely with CSS, show an example :-)

Comment by Chris Heilmann — September 13, 2007

Leave a comment

You must be logged in to post a comment.