Setting height with jQuery ignores content on initial load but works after refresh

Question

I'm using this code to set equal heights on my columns:

$(document).ready(function(){


  $('section').each(function(){  

        var highestBox = 0;
        $('.slide', this).each(function(){

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  

        $('.slide',this).height(highestBox);         

    });   
});

It makes all columns equal height, but on initial load it ignores the fact that there's an image in the column. So the image appears half inside/half outside the bottom of the column, and/or overlaps other content, thus displaying incorrectly. If I refresh the page however, the code sets the height correctly, and the image is contained within the column as it should be.

I set up the exact code in jsFiddle. You may need to open your browser window wide to see the problem, as I've got bootstrap breakpoints in there for smaller screens.

You should see the image overlapping other content at the bottom of the columns on initial load. If you refresh the page, the display then renders correctly, and all items are contained within the column.

Any ideas as to why this is happening?

score 2 · Answer 1 · answered Jul 08 '15 at 19:35

2

It's because, $(document).ready() doesn't wait for images to be fully loaded. When you do a refresh, it does work as the images may have been fetched from the browser cache. So, your best bet is to run your code within .load() as opposed to .ready() like below:

$(window).on('load', function() {
    $('section').each(function() {  

        var highestBox = 0;
        $('.slide', this).each(function(){

            if($(this).height() > highestBox) 
                highestBox = $(this).height(); 
        });  

        $('.slide',this).height(highestBox);         

    });
});

answered Jul 08 '15 at 19:35

lshettyl

7,854
4
21
28

From what I've read, load is very inconsistent. What are your thoughts on this? – slinhart Jul 08 '15 at 19:39
I haven't heard/experienced anything of that sort as it's a hook to the native `window.onload`. – lshettyl Jul 08 '15 at 19:49
I think your right, I was confused with something else. I'll delete my (wrong) answer and upvote yours. Cheers – slinhart Jul 08 '15 at 19:53
This was my initial thought, but I'm still quite new to jQuery. Thanks so much, it loads nicely now! – The Huntsman Jul 08 '15 at 19:58
If it helped, pls accept this as the answer. Thanks @slinhart :) – lshettyl Jul 08 '15 at 21:59

Setting height with jQuery ignores content on initial load but works after refresh

1 Answers1