Question

We created a very basic equal height function a while back that works great. However, we’ve been tasked with making the column heights resize as the window is resized. It’s being implemneted into a responsive, fluid design. But the powers that be don’t understand that the typical responsive use case isn’t dragging your browser all over the place to accept specific break points.

Anyhow, got the markup and js setup in jsfiddle here. http://jsfiddle.net/J6uaH/3/

Just can’t quite wrap my brain around adding the window resize element to the heights. Any help that anyone can provide will be hugely appreciated and would give whoever super hero bonus points, if there was such a thing!

Answer 1

why not just add an event listener to the resize event of the window that recalculates the height of the elements?

however because you already set a fixed height to the elements, you need to reset the height of both elements to get the new maximum size.

try adding:

$(window).resize(function(){
    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();
});

work in firefox. what this basicly does on every resize of the window:

1. reset the height of the elements, meaning the browser will calculate it based on its content
2. execute you function again to make both elements of equal height