Get highest value of DOM element heights and pass it to parent elements to display them equally high.
jQuery(function($){
// pass the windows whose height is to be compared
// the windows whose height will be setActive
// and for each pair any additional space
function autoHeight(ToBeCompared, ToBeSet, PlusSpace) {
var largestHeight = 0;
if (ToBeCompared.length == ToBeSet.length) {
// loop to find the largest height
for (var i = 0; i < ToBeCompared.length; i++){
if ((ToBeCompared[i].height()+PlusSpace[i]) > largestHeight){
largestHeight = ToBeCompared[i].height() + PlusSpace[i];
}
}
// loop to make all of them that high
for (var j = 0; j < ToBeCompared.length; j++){
ToBeSet[j].height(largestHeight);
}
}
}
$(document).ready(function() {
autoHeight([
$('.some-class1 .child'),
$('.some-class2 .child'),
$('.some-class3 .child')
],
[
$('.some-class1'),
$('.some-class2'),
$('.some-class3')
],
[70, 70, 70]);
});
$(window).resize(function() {
autoHeight([
$('.some-class1 .child'),
$('.some-class2 .child'),
$('.some-class3 .child')
],
[
$('.some-class1'),
$('.some-class2'),
$('.some-class3')
],
[70, 70, 70]);
});
});