Responsive Equal Height Blocks in a Row - problematic in IE8

Question

The Requirement: Equal Height Blocks in Rows

I work on a lot of joomla sites whose designs require the various page divs to be equal in height. CSS Tricks has a good example of how to line up and equalise the heights of multiple rows of blocks. However, the CSS Tricks example assumes that all your divs/blocks are going to be similar elements with a shared class, eg. .blocks.

I needed a function that could take several disparate elements on a page, with no common classes, and equalise their respective heights. So this is what I wrote:

//EQUAL HEIGHT
equalHeight = function(container1, container2, container3) {

    var mainBlock = container1;
    var secondBlock = container2;
    var thirdBlock = container3;

    // in case the div heights have already dynamically changed,
    // reset the div heights back to their true markup values
    $(mainBlock).css('height','auto');
    $(secondBlock).css('height','auto');
    $(thirdBlock).css('height','auto');

    var highestBlock = 0;

    // determine which is the tallest block before doing anything
    $(mainBlock).each(function(){  
        if($(this).height() > highestBlock){  
            highestBlock = $(this).height();  
        }
    });    

    // Now apply the tallest block value to the heights of all relevant divs
    $(mainBlock).height(highestBlock);
    $(secondBlock).height(highestBlock);
    $(thirdBlock).height(highestBlock);
}

//EQUAL HEIGHT USAGE EXAMPLE
equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');

The Problem

This function works exactly the way I want it to, but I run into problems when calling it on (window).resize, especially in IE8. My sites are responsive, and I need to readjust the equalised heights of divs once the browser window size has changed in size. This seems to work fine in other browsers, but because of the way IE8 deals with the resize event, calling my equalHeight function inside the resize event triggers an endless loop, which crashes the browser.

The Question

Given the above, how would you go about ensuring that sites can have equally-sized blocks/divs in IE8 without compromising performance? I would like to be able to avoid using the (window).resize event, but haven't found a superior alternative. Is there a better time and place to be calling the equalHeight function? Are there flaws in the equalHeight function itself that I'm missing? The only solution I'm not open to considering is 'change the site design', since this isn't something over which I have control.

Answer 1

First of all, I assume you are using respond.js? It is a great tool to make IE8 responsive.

https://github.com/scottjehl/Respond

Now for the juiciness. All you need to do is "throttle" the event.

var throttleTimeout = false,
    throttleTime = 2000; //2 seconds
function throttleHeight(event){
   if(!throttleTimeout){ //check if throttle variable is false
      throttleTimeout = setTimeout(function(){ //set a timeout
         equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');
         throttleTimeout = false; //reset variable
      },throttleTime);
      throttleTimeout = true;
   }
}
jQuery(window).resize(throttleHeight);

What this does is not allow equalHeight to run more then every 2 seconds, because unless the timeout is cleared, it will not run. Untested however it should work enough to get you started on the idea.

Answer 2

The only solution I'm not open to considering is 'change the site design', since this isn't something over which I have control.

This is, by far, the best solution though.

Having equal height columns is a purely aesthetic decision with zero bearing on functionality. As such, this is a behaviour that should added with the principle of progressive enhancement; a nice-to-have for browsers that can support it.

The worst-case, fall-back, scenario being that IE8 users (2.1% and falling http://www.w3schools.com/browsers/browsers_explorer.asp ) get all the content, all the functionality, but don't see equal height columns. Hardly the end of the world is it? Users of IE8 will certainly never notice.

As a responsible web designer part of your job should be to educate clients about what is and isn't possible / sensible / desirable on the web. They probably have no idea why doing such a thing is a bad idea, they're not web designers.