Jquery script compability problem in chrome only and in specific page

JavaScript
1

hello

in a wordpress site a inserted jquery script to dynamicly expand the colums heights according to the highest one


<script type="text/javascript">
$(document).ready(function() {
var colHeight = Math.max($('#c2').height(), $('.widget').height());
$('#c2, .widget').height(colHeight);
});
</script>

i have a weired problem in this page only and only on chrome (what i saw until now ): http://z-ls.info/category/%D7%A7%D7%A6%D7%A8%D7%A6%D7%A8%D7%99%D7%9D/

more than that if i access to this page by not directly for example going to another page and then press back, the page apper great

i hope someone can help with that.

2

What’s the problem? I tried comparing the page in Chrome, Firefox, and IE, but couldn’t find anything…

3

i know something crazy
but it only when you access the link directly
and only in chrome screenshot attached

4

Here’s my guess as to what’s happening… You have some JS for setting #c2 and .widget to be equal height. This code is inside a $(document).ready() function. But jQuery’s “ready” function tries to execute as quickly as it can–as soon as the DOM is loaded (it doesn’t wait for external resources, like images). So when the user first visits your site, it takes a little longer to first load those images, and jQuery notices that the DOM is finished loading waaay before the images are done. It runs your “equal height” script; when the images do finally finish and show up, they push everything in that column down.

This would explain why it only happens when the user first visits the page: On subsequent visits, the images are in the cache and can be loaded instantly.

But I have no idea if this is actually what’s happening. The fact that it only happens in Chrome is distressing.

Easy enough to check, though! If I’m right about what’s going on, then the fix would be to have your “equal height” script run when the window is loaded, rather than when the document is ready:


$(window).load(function () {
    var colHeight = Math.max($('#c2').height(), $('.widget').height());
    $('#c2, .widget').height(colHeight);
});

Does that fix the problem?

5

God help me how much I love you
simply genius

thanks a lot !

6

just last question

so what’s the diffrence between “window.load” and “document.load”
why not using windows.load all the time ?

7

$(window).load will wait for the entire page to finish loading. Images, frames, video, flash… everything. A lot of the time, you don’t really care about that stuff. Usually, your script only needs to wait for particular DOM elements to be available. That’s when you would use $(document).ready.

8

thanks for the help and the info