CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
user1100149
user1100149

Reputation: 266

jQuery equal height columns - column intermittently breaking outside of DOM

My Simplified code is something like this:

<div class="equal clearfix">
    <section class="secondary column clearfix">
    </section>
    <section class="primary column clearfix">
        <div id="map_canvas" style="width:520px; height:350px;" class="google-map"></div>

        <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image.jpg" class="image" />
        </div>
         <div>
            <a href="#" class="overlayed-link">link</a>
            <img src="/images/image2.jpg" class="image" />
        </div>
    </section>
</div><!-- /.equal -->
<footer>Blah</footer>

Then I have my JavaScript / jQuery:

$( document ).ready( function() {
    $('.equal').each(function(){  
        var highestBox = 0;
        $('.column', this).each(function(){
            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  
        $('.column',this).height(highestBox);
    }); 
});

This all works great. But then SOMETIMES, and only sometimes...and only in Google Chrome, that primary Column, the one with the images in it, breaks past the footer.

When I've checked in the Chrome's native developer tools, I can see that it is not the column breaking past the footer, but only the image itself. The columns are actually set to equal heights as they should be (it's just not the correct height). And the footer sits at the bottom of the DOM, where it should be. Technically everything is in place, yet the final image in that column sits below everything in the DOM, including the closing HTML tag.

I suppose it has to be JavaScript issue, but there are no errors. Has anyone come across it before?

It seems to be completely random, but happens most when opening a new tab in the browser and loading the page. It may also be worth noting that there is a Google Map in there, as shown in the code.

Upvotes: 0

Views: 147

Answers (2)

UweB
UweB

Reputation: 4110

The problem is that document ready will fire as soon as all the HTML, script and CSS files are parsed. However, it may fire before your images are loaded. Unless they have been given a fixed height through CSS/the deprecated HTML attribute, they may break your script.

The load event fires after all the page's content was loaded, including images. This is why it works after your changes.

Upvotes: 1

user1100149
user1100149

Reputation: 266

I think I have resolved it by replacing my $( document ).ready() with $( window ).load() to ensure everything, including all of my assets (images, map, etc), are loaded before setting any heights on the columns.

I've loaded the page at least 100 times now, and no issues. So it's looking positive. (I'll come back and update this answer if it turns out not to be resolved).

Upvotes: 0

Related Questions