Drupal 6: Using jQuery to ensure Panel columns are the same height
I recently implemented the Panels module to create a page layout with 3 columns. I added background images to the columns, repeating on the y axis to span the entire length of the column. The problem I encountered: you cannot predict how tall the content will be in your columns and they will be staggered. To provide a more uniform styling, I added some jQuery to find the tallest column and set the shorter ones to the max height.
$(document).ready(function(){
// keep track of the tallest column
var tallest = 0;
// loop through columns and find the tallest
$('#panel_other_programs .panel-panel').each(function(){
if ( $(this).outerHeight(true) > tallest )
tallest = $(this).outerHeight(true);
});
// loop through columns and adjust height as necessary
$('#MY-PANEL-UNIQUE-IDENTIFIER .panel-panel').each(function(){
// check if current column needs to be adjusted
if ( $(this).outerHeight(true) < tallest ) {
// set new height
$(this).height( tallest );
}
});
});
Now all the columns should have a uniform height and the backgrounds should all span the entire length of each column.