Question

I am developing a site that parses RSS feeds and displays them in a series of divs. After all of the feeds load, I would like to run a jquery function that basically takes the height of the tallest div and sets all of the divs equal to that height. You can view the site here: http://vitaminjdesign.com/adrian/

Currently, I using the jquery equal heights plugin outlined below:

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

and you can call it with:

$(document).ready(function() {
$(".block").equalHeights(); 
});

This isn’t working properly (it sets the height of all the divs equal to the height of the tallest div BEFORE the rss feed loads), most likely due to the fact that I need to use a live event handler? Anyone know how I can set the heights to be equal after everything is completely done loading?

Answer 1

You need to call equalHeight when the AJAX is complete. You have two options: (a) to do the call after each item is loaded or (b) to do the call once after all the items are loaded. equalHeight doesn’t look resource-heavy, so you may as well do the call each time.

So just add equalHeight($(".block")); to the success callback of each AJAX call.

$.ajax({
    url: 'someurl.rss',
    success: function(){
        // your code to insert the relevant content

        equalHeight($(".block")); // insert this at the end of each call to the RSS files
    }
});

---

Alternatively, and slightly more intensive, but simpler in terms of code, is to use ajaxSuccess to run a function after every AJAX call:

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));
});