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.
Thanks
Thanks Eric,
This was a great head start for me. I needed to make adjacent panels the same height. So panels in row 1 and panels in row 2 are evaluated separately.
I gave each panel a css class of panelheight1, panelheight2 etc. I then loop through the classes and panels and make the panels on the same row equal height. I set this to loop 5 times so I can have up to 5 classes.
$(document).ready(function(){
for(i=1;i<=5;i++) {
// keep track of the tallestCol column in each row [i]
var tallestCol = new Array();
tallestCol[i] = 0;
var panelclass = '.panelheight'+i;
// loop through columns in this row and find the tallestCol
$(panelclass).each(function(){
if ( $(this).outerHeight(true) > tallestCol[i] )
tallestCol[i] = $(this).outerHeight(true);
});
// loop through columns in this row and adjust height as necessary
$(panelclass).each(function(){
// check if current column needs to be adjusted
if ( $(this).outerHeight(true) < tallestCol[i] ) {
// set new height
$(this).height( tallestCol[i] );
}
});
}
});
I added this by placing this code into the script.js file in my theme folder. Just thought I would share in case this helped anyone else.
Cheers,
Matthew
Is
Is "#MY-PANEL-UNIQUE-IDENTIFIER" the Machine name of the panel or is it something else?
Excuse my ignorance on this!
great
Worked perfectly. A simple solution that makes it very usefull. Thanks
Nice work
Nice work, Eric.
For Panels 2 in Drupal 5 I once wrote a little module that a simple module that adds the equalHeights jQuery plugin (http://www.cssnewbie.com/equalheights-jquery-plugin/) and is based on the panels block classes. This script though has trouble accurately calculating heights in Internet Explorer 6 if you’re trying to find the height of an element that contains images that don’t have heights set. Unless the height has been specified, the script seems to assume a height of zero. This condition checks if the browser is IE6. If so, the script will not be applied.
Also, I've just noticed that someone wrote a module for D6 that uses the same jQuery plugin http://drupal.org/project/equalheights
Here's the code for my module:
<?php/**
* Implementation of hook_menu().
*/
function equalHeights_menu($may_cache) {
if (!$may_cache) {
drupal_add_js(drupal_get_path('module', 'equalHeights') .'/jquery.equalheights.js');
drupal_add_js("$(document).ready(function() {
var IE6 = (navigator.userAgent.indexOf('MSIE 6')>=0) ? true : false;
if(!IE6) {
$('.panel-second-row').equalHeights();
$('.panel-third-row').equalHeights();
$('.panel-fourth-row').equalHeights();
}
});", 'inline', 'header');
}
}
?>
Michael (mkrakowiak)
Where does this code go?
Where does this code go?
jQuery location
I put all my jQuery in the script.js file in my theme directory. This page shows the components of a Drupal 6 theme.
-Eric
placement
Hey, thanks for this tip. Where does one put this code?
no change in column
hi Eric..
Nice post.
i have made a script file myscript.js of your code and put it in the garland theme folder .
Script is running as i am able to see it in source code file.
But there is no change in the column height in panels.
Please help me out.