1

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.

  • just curious, why you need responsive in old IE? :) – Fedik Jun 20 '14 at 11:18
  • I can only think of one example where this would really matter. If someone was viewing the site in IE8 on a desktop computer and they chose to manually resize the browser window, they would want to see the site 'responding' accordingly. This is a non-negotiable requirement from the client unfortunately. – Candlejack Jun 20 '14 at 11:25
  • Have you tried to do this with pure css, in conjunction with those scripts that allow IE to understand css3 stackoverflow.com/questions/2808009/…? | github.com/scottjehl/Respond – FFrewin Jun 20 '14 at 11:55
  • I can't resist adding this to the discussion: imgur.com/PDeMiPF – GDP Jun 20 '14 at 12:53
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.

  • Noticed some random bugs in the code, took me a bit to see and fix, should work now. – Jordan Ramstad Jun 25 '14 at 19:45
0

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.

  • I agree on all points, Seth. However, the reality of the wider context is that if a very senior company figure likes to use IE8 and takes an interest in the site, they can insist on specific features being present in their IE8 view. Our dev team can (and do) make all the recommendations and educational attempts you might expect, but sometimes forcing the issue is simply not possible. In the future this problem should be greatly reduced - our company will shortly be switching to Chrome as our default in-house browser for all employees. A little late to the party, but better late than never ;) – Candlejack Jun 27 '14 at 10:33
  • If you consider equal height divs a feature; I don't as without it nothing is lost. That said, I fully understand the pressure to do useless things like this. I recently completed a project, also with IE8 as a requirement, where the designer had styled scrollbars and select elements. You can imagine my delight. I wish you all speed in the move to Chrome! :) – Seth Warburton Jun 27 '14 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.