I have been attempting to dynamically set the height of all my divs to match the highest div upon page load and window resize. Below is the code snippet I am using:
// function to equalize 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);
}
}
// event binding
$(window).on("load resize", eqColumn);
The code works as expected on initial load, but encounters issues when resizing the window. Upon logging the value in the console during a resize event, the value remains unchanged. I am puzzled by this behavior. You can view an example site here:
What could be causing this issue?