JQuery - Equal Div-Heights after resizing
I am trying to set all my divs to the height of the tallest div on load and on resize. Here's the code:
// set equal column heights
function eqColumn(){
if ($(window).width() > 767){
var item = $(".item");
var biggest = 0;
$(item).each(function(){
if ($(this).height() > biggest){
biggest = $(this).height();
console.log(".item height = " + biggest);
}
});
item.css("height", biggest);
}
}
// bind events
$(window).on("load resize", eqColumn);
It works fine on load, but not on window resize. When I log the value to the console, the value doesn't change when resized. I'm really stumped. Here's an example site: http://dev.thomasveit.com/zuzuegler/
What am I doing wrong?
+3
source to share
1 answer
this is because all items are equally large after being loaded / resized. Since you are resizing them the first time the eqColumn function runs:
item.css("height", biggest);
Try resetting the .item size before iterating over .each:
function eqColumn(){
if ($(window).width() > 767){
var item = $(".item");
//reset the height to auto
item.css("height", "auto");
var biggest = 0;
$(item).each(function(){
if ($(this).height() > biggest){
biggest = $(this).height();
console.log(".item height = " + biggest);
}
});
item.css("height", biggest);
}
}
+4
source to share