Sunday, March 22, 2009

Equal Column Heights using CSS and JQuery

Thought I would share a little JQuery code.

I finished my dynamically generated filter screen a few months ago and when I did the layout I decided to dynamically generate DIV tags instead of TABLES.

I basically had 3 types: small, medium, and large columns that floated left with a maximum of 3 small columns per row, 2 small and 1 medium, etc.

All worked fine except I had a nice light brown background for each and the heights were not equal. It kind of looked like a jumbled bar chart. :)

Since everything is dynamic, I turned to JavaScript. I first wrote a couple of JavaScript functions and all worked in IE but not FireFox (yep, it's usually the other way around, huh?) so I settled with JQuery afterall it's backed by Microsoft and they now offer Intellisense for it in VS 2008 SP1. It was sure easier, take a look at the code below:

//Function to loop through each item with passed in Class
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight + 5;
}
});
group.height(tallest);
}

//Code to call equalHeight passing in Wildcard col because different width
//columns get generated (colSmall, colMedium, colLarge)
$(document).ready(function() {
equalHeight($("[class^=col]"));
});


Dynamically generated CSS Level 2.1 at it's finest. :)

Pretty simple and quick, huh? Here's quick photo of what it looks like:

No comments:

Post a Comment

Swidget

You May Like This