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

Question

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>

Solution

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/

Comments

[rnirnber]

Can you please give me my points back Sparky? I've personally used $(window).ready()...and it's just as good as $(window).load()

[Sparky]

You may think it works great, but it is not the same thing at all, and your answer is not much different than document.ready. Again, read the documentation for .ready()... "Specify a function to execute when the DOM is fully loaded.". Whereas, .load() "is sent to an element when it and all sub-elements have been completely loaded."

[Mohammad Naji]

Thank you @Sparky672, but it didn't work and it seems that this corrupted my code. The alert at the end doesn't work.

[Sparky]

@smhnaji, there is nothing unusual in my answer. Scroll down this page and see first example code. Can you construct a jsFiddle demo to show your problem?

[Mohammad Naji]

it's very strange but when using jQuery(window).load, I saw that $ doesn't work (while document.ready worked EXACTLY with the $ and the same code), anyway I used jQuery instead of $ with your solution. The live example is at the main page of yaskawa.ir