January 17, 2008

CSS / Javascript matching columns

If you are having trouble getting two div columns to match, then try this matching columns script. It is a very simple script that will match the height of the columns you specify (all you have to do is assign the class ‘column’ to the columns you want to match).

/*
 
Derived from a script by Alejandro Gervasio.
 
Modified to work in FireFox by Stefan Mischook for Killersites.comHow it works: just apply the CSS class of 'column' to your pages' main columns.
 
*/
 
matchColumns=function(){
 
var divs,contDivs,maxHeight,divHeight,d;
 
// get all
 
elements in the document
 
     divs=document.getElementsByTagName('div');
 
contDivs=[];
 
// initialize maximum height value
 
     maxHeight=0;
 
// iterate over all
 
elements in the document
 
     for(var i=0;i
 
// make collection with
 
elements with class attribute 'container'
 
          if(/\bcolumn\b/.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
 
contDivs[i].style.height=maxHeight + "px";
 
}
 
}
 
// Runs the script when page loads
 
window.onload=function(){
 
if(document.getElementsByTagName){
 
matchColumns();
 
}
 
}

Comments (1)

  1. March 11, 2008

    Is there a copyright requirement above and beyond what you have. I’m curious if this is GNU / GPL and so on.

Leave a Reply