//Usage: equalHeights('child element Class');
jQuery(document).ready(function($){
window.equalHeights = function ($childEl) {
// your function logic goes here
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el2015,
topPosition = 0;
$($childEl).css("height", "auto");
$($childEl).each(function() {
$el2015 = $(this);
topPostion = $el2015.position().top;
if (currentRowStart != topPostion) {
// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el2015.height();
rowDivs.push($el2015);
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el2015);
currentTallest = (currentTallest < $el2015.height()) ? ($el2015.height()) : (currentTallest);
}
// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
};
});
Wednesday, July 20, 2016
jQuery: Equal heights in div rows
Use the following javascript. Where $childEl is the class of the children divs.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment