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>

enter image description here

I see all the div's with the same height (using Chrome). What's the problem? — Kedume, Dec 12 '12 at 20:48
I'm using chromium in Linux and it has the problem. I'll upload the pic now — Mohammad Naji, Dec 12 '12 at 20:55
Please construct jsFiddle of your problem. `window.load` is working fine here: http://jsfiddle.net/snBLP/3/ — Sparky, Dec 12 '12 at 21:43

Sparky · Accepted Answer · 2012-12-12T21:41:45.270

20

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/

edited Dec 12 '12 at 21:41

answered Dec 12 '12 at 21:00

Sparky

98,165
25
199
285

Thank you @Sparky672, but it didn't work and it seems that this corrupted my code. The `alert` at the end doesn't work. – Mohammad Naji Dec 12 '12 at 21:31
@smhnaji, [there is nothing unusual in my answer](http://jsfiddle.net/snBLP/2/). Scroll down [this page and see first example code](http://api.jquery.com/load-event/). Can you construct a jsFiddle demo to show your problem? – Sparky Dec 12 '12 at 21:36
1

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 http://yaskawa.ir/ – Mohammad Naji Dec 12 '12 at 21:43

score -2 · Answer 2 · answered Dec 12 '12 at 20:55

-2

$(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...

answered Dec 12 '12 at 20:55

rnirnber

607
7
17

Can you please give me my points back Sparky? I've personally used $(window).ready()...and it's just as good as $(window).load() – rnirnber Dec 12 '12 at 21:10
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."_ – Sparky Dec 12 '12 at 21:31

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

2 Answers2