Equal heights plugin not calculating proper height

Question

http://www.tmla.org/new_site/

That's the relevant link. The issue appears when you refresh the page. Loading the page normally from the browser or from your cache seems to be fine. Not sure why this is happening. Can anyone help shed some light on this? Any help would be appreciated. Code to follow:

    (function($) {
        $.fn.equalHeights = function(minHeight, maxHeight) {
            column1 = 0;
            column2 = 0;
            column3 = 0;

            //FIND THE TOTAL HEIGHT OF EACH COLUMN BY ADDING UP EACH WIDGET, SORTING BY UNIQUE COLUMN CLASS
            this.each(function() {
                if($(this).hasClass('column1')) {
                    column1 = column1 + $(this).height();
                } else if($(this).hasClass('column2')) {
                    column2 = column2 + $(this).height();
                } else if($(this).hasClass('column3')) {
                    column3 = column3 + $(this).height();
                }
            });

            //alert(column1);
            //alert(column2);
            //alert(column3);


            //FIND THE TALLEST COLUMN
            tallest = Math.max(column1, column2, column3);

            //alert(tallest);

            //SIMPLE MATH TO DETERMINE HOW MUCH HEIGHT TO MAKE THE LAST WIDGET OF EACH COLUMN SO THEY LINE UP NICE AND NEAT
            column1 = tallest - column1 + $('#left_sidebar .widget').last().height();
            column2 = tallest - column2 + $('#center_sidebar .widget').last().height();
            column3 = tallest - column3 + $('#right_sidebar .widget').last().height();

            //alert('Add how much to Column 1: ' + column1);
            //alert('Add how much to Column 2: ' + column2);
            //alert('Add how much to Column 3: ' + column3);

            //alert('Left' + $('#left_sidebar .widget').last().css('height'));
            //alert('Center' + $('#center_sidebar .widget').last().css('height'));
            //alert('Right' + $('#right_sidebar .widget').last().css('height'));

            if(column1 != '0px') {
                $('#left_sidebar .widget').last().css('height', column1 + 'px');
            }

            if(column2 != '0px') {
                $('#center_sidebar .widget').last().css('height', column2 + 'px');
            }

            if(column3 != '0px') {
                $('#right_sidebar .widget').last().css('height', column3 + 'px');
            }
        } 
    })(jQuery);

Answer 1

Just out of curiosity, could you add the width and height attribute to the image of that says "TMLA You deverve to be here". When applying equalHeight, I ran into this problem sometimes... depending if the image is loaded or not, the equalheight won't get the correct height...well actually it is the correct height but not what you're expecting.

So my guess is that equalHeights is applied and then this image is loaded which is why you have about 166px more on the first column.

You didn't see this on the other columns because all images have the width and height attributes!

---

FYI: The easiest way to set the same height to columns comes from Paul Irish. Sorry can't find the original post so here's the code.

$.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

Usage

$('.selector').setAllToMaxHeight();