Matching Columns Script – Update.
February 17, 2007
Hi,
I decided to create another blog post to make it easier to find the updated version of the important matching columns script – it was buried in the originals article’s comments.
Notes:
- The original matching columns video tutorial
- The original discussion on the web design forum
–
Updated script by: Jonathan del Mar
I have modified the script to work with multiple class groups also with elements with multiple class names
/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com
Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)
How it works: just apply the CSS class of ‘column’ to your pages’ main columns.
to work with different classes
add
var columns = new Array(’class_name1′, ‘class_name1′…);
by Jonathan del Mar
by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar
*/
matchColumns=function(my_class){
var divs,contDivs,maxHeight,divHeight,d;
// get all elements in the document
divs=document.getElementsByTagName(’div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}
my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);
// iterate over all elements in the document
for(var i=0;i elements with class attribute ‘container’
//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes
if(my_regex.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container elements
for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);
to your html header.
