Make an equal height function resizeable on window resize

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

Answer 2

Personally, I'd solve this problem without resorting to JavaScript at all. If you're willing to add a little more HTML, you can achieve the desired visual effect with CSS alone.

Here's a JSFiddle: http://jsfiddle.net/Z59eT/2/

Basic strategy:

1. Add an element with clear:both to the end of the group of modules --- this allows the group's height to be equal to the greater of the two modules.
2. Give the group and module divs position:relative so they participate in positioning.
3. Add special background elements into before each module --- these elements will grow vertically to match the size of the group, implementing the desired column colors.

I'm sure there are other pure-CSS ways of solving this problem. This is just the first that came to mind. Your real requirements may demand something with more nuance.

Whenever possible, it's better to let the browser do the work. In this case, rather than calculate heights it's better to let the browser handle it if you can since the browsers native capabilities will run orders of magnitude faster than interpreted JS code.

Answer 3

I just had to do this myself. I've used the setEqualHeight function in the past, but was 'requested' to make it work when somebody is resizing the window like crazy.

room13's fix is the key. Otherwise it just uses the old set height. You obviously call the same function on DOM ready as well. I do add a delay function for the window resize, so you only call it when your done, not constantly.

jQuery:

function setEqualHeight(columns) {
    var tallestcolumn = 0;
    columns.each(
    function() {
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
            }
        }
    );
 columns.height(tallestcolumn);
}

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        $('.yourSelector').css('height','auto'); //solve for all you browser stretchers out there!
        setEqualHeight($('.yourSelector'));
    }, 500);
});

Answer 4

Issue is you are getting the larger height and then applying it to the boxes. However when you compare again, you are comparing the original boxes again, however it's the paragraph height that has changed.

$.fn.equalHeight = function() {
    var maxHeight = 0;
    return this.each(function(index, box) {
        var boxHeight = $(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);
    }).parent().height(maxHeight);
};

$(document).ready(function() {
    $('.group .module p').equalHeight();

    $(window).resize(function () {
        $('.group .module p').equalHeight();
    });

});

Answer 5

It's worth noting that this is exactly what tables do. Example: http://jsfiddle.net/Z59eT/3/

A table with one row and two 50% columns will grow exactly as your specifications demand.