match div heights after page load jQuery

Question

I am having trouble matching the height of a div after the loading of images. it gets the height of the tallest div, however it seems to get it before the images are loaded. is there any way around this? here is what I have so far:

function matchColHeights(col1, col2) {
    var col1Height = $(col1).height();
    alert('col1 '+col1Height);
    var col2Height = $(col2).height();
    alert('col2 '+col2Height);

    if (col1Height < col2Height) {
        $(col1).height(col2Height);

    } else {
        $(col2).height(col1Height);
    }
}

$(document).ready(function() {
    matchColHeights('#leftPanel', '#rightPanel');
});

here is a link to where it is being ran: http://www.tigerstudiodesign.com/blog/

score 5 · Accepted Answer · answered Dec 22 '11 at 14:49

5

Do the column height resize after the image has loaded. Something like:

$('img').load(function() {
     $(col1).height(col2Height);
});

answered Dec 22 '11 at 14:49

Leigh Ciechanowski

1,297
17
33

with a little bit of fiddling, I got this to work, thanks! this is what worked for me:function matchColHeights(col1, col2) { $('img').load(function() { var col1Height = $(col1).height(); alert('col1: '+col1Height); var col2Height = $(col2).height(); alert('col2: '+col2Height); if (col1Height < col2Height) { $(col1).height(col2Height); } else { $(col2).height(col1Height); } }); } $(document).ready(function() { matchColHeights('#leftPanel', '#rightPanel'); }); – Lukasz Dec 22 '11 at 15:48

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

According to this question, window.load is fired when all images are loaded, so try this:

$(window).load(function() {
  // ...
}

edited May 23 '17 at 11:52

Community

1
1

answered Dec 22 '11 at 14:47

Yogu

9,165
5
37
58

I have tried this, it doesn't seem to grab the div height. I did an alert and it doesn't even pop up. – Lukasz Dec 22 '11 at 14:59

score 0 · Answer 3 · answered Mar 28 '13 at 22:15

The issue is when the width and the height are not provided on the images tags. The DOM uses them to measure, if they aren't provided then it has to wait for the image to load in order to "re paint" the screen with the correct heights. This is why it wasn't working..

match div heights after page load jQuery

3 Answers3