/**********************************************************************************************************
* Author: Joshua Carmody
* Last Modified: 2009-04-08
**********************************************************************************************************
* Including this file in your HTML page, will allow you to automatically force groups of DIVs to be the
* same height. All you have to do to use this is put class="heightlink1" in every DIV you want to be the
* same size. If you'd like link a different set of DIVs on the same page, put class="heightlink2" in their
* tags. For a third group put class="heightlink3", and so on. Right now the code is arbitrarily limited to
* 50 groups per page, but that's easily changed if the need arises.
*
* Here's a usage example:
*
*
* Example
*
*
*
* This div is 1 line tall
* This div
is 2 lines tall
* This
div
is 4
lines tall
*
*
*
*
*
* USAGE NOTES:
* - This script does not take into account borders or padding. Using a "heightlink" class on
* a div that has a padding value may produce undesirable results.
* - This script will override any explicit "height" or "overflow" values on elements it affects.
* - This script may be slow on pages with a unusually large number of DIVs in the markup.
* - Some flickering may occur after loading or resizing, due to height and overflow
* properties being adjusted.
**********************************************************************************************************/
function linkDivHeights() {
var allDivs = document.getElementsByTagName("div");
var heightLinkedGroups = new Array();
for (var i = 0; i < allDivs.length; i++) {
var currentDivClassNames = allDivs[i].className.split(" ");
for (var j = 0; j < currentDivClassNames.length; j++) {
if (currentDivClassNames[j].indexOf("heightlink") == 0 && currentDivClassNames[j].length >= 11) {
var linkGroupNumber = parseInt(currentDivClassNames[j].substring(10));
if (linkGroupNumber > 0 && linkGroupNumber <= 50) {
if (heightLinkedGroups.length < linkGroupNumber) {
heightLinkedGroups[linkGroupNumber - 1] = new Array();
}
if (!(heightLinkedGroups[linkGroupNumber - 1])) {
heightLinkedGroups[linkGroupNumber - 1] = new Array();
}
allDivs[i].style.height = "100%";
allDivs[i].style.overflow = "auto"; // IE will return "0" as the element's clientHeight unless overflow is set to "auto"! Why?!
heightLinkedGroups[linkGroupNumber - 1][heightLinkedGroups[linkGroupNumber - 1].length] = allDivs[i];
}
}
}
}
for (var i = 0; i < heightLinkedGroups.length; i++) {
var currentMaxHeight = 0;
if (heightLinkedGroups[i]) {
for (var j = 0; j < heightLinkedGroups[i].length; j++) {
var elementHeight = heightLinkedGroups[i][j].clientHeight;
currentMaxHeight = elementHeight > currentMaxHeight ? elementHeight : currentMaxHeight;
}
for (var j = 0; j < heightLinkedGroups[i].length; j++) {
heightLinkedGroups[i][j].style.height = currentMaxHeight + "px";
heightLinkedGroups[i][j].style.overflow = "visible";
}
}
}
}
try {
window.addEventListener("load", linkDivHeights, false);
window.addEventListener("resize", linkDivHeights, false);
}
catch(err) {
try {
window.attachEvent("onload", linkDivHeights);
window.attachEvent("onresize", linkDivHeights);
}
catch(err2) {
// Ah well, guess we don't get to link DIV heights. Not the end of the world, the page might just be uglier.
}
}