CODEWITHSUNDEEP
cssjquerydocument-readywindow-load
Mohammad Naji
Mohammad Naji

Reputation: 5442

JQuery div.height is wrong in Chrome to make all the divs same height

I have used the following code to have equal height for rightpos, leftpos and middlepos divs:

<script>

    jQuery.noConflict();
    jQuery(document).ready(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

    })
</script>

Determining of the tallest div using this way for the main page of http://yaskawa.ir/ works well in Firefox, but has problems in Chrome.

UPDATE 1 after Sparky672's answer:

I can see that with this code,the alert('test here'); at the end doesn't work.

<script>
    jQuery.noConflict();
    //jQuery(document).ready(function($){});

    jQuery(window).load(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

        alert('test here');
    })
</script>

enter image description here

Upvotes: 11

Views: 10739

Answers (2)

Sparky
Sparky

Reputation: 98738

Try window.load() in place of document.ready() to ensure that all assets are loaded before your heights are calculated.

jQuery(window).load(function($){

Documentation:

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

http://api.jquery.com/load-event/

See DEMO:

http://jsfiddle.net/snBLP/3/

Upvotes: 20

rnirnber
rnirnber

Reputation: 615

$(document).ready() isn't suitable for calculating heights. $(document).ready() doesn't wait for images to load, etc.

I'd suggest trying

$(window).ready()

instead...

Upvotes: -2

Related Questions