Equal Heights not working until window resize

[greencode]

I'm using the following script so that I can create equal height blocks in a grid:

<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.equalHeights = function() {
     this.each(function(){
      var sizeTo = 0;
      $(this).find('.block').each(function(){
       $(this).height('auto')
       if ($(this).height() > sizeTo) {
        sizeTo = $(this).height();
       }
      });
      $(this).find('.block').height(sizeTo);
     });
     return this;
    };
    $(function(){
     $('ul.products').equalHeights()
     $(window).bind( "resize", function(e) {
      $('ul.products').equalHeights()
     });
    });
    });
</script>

The problem is that it doesn't seem to be firing until I resize my window. What it does initially is to load all of the blocks but overlaps them until browser resize.

[Fotiman]

Seems to be working as expected for me:
[jsfiddle.net...]

[greencode]

Yeah, it seems to be okay when having text content but when you then add an image it seems to go to the height of the image initially and then when resizing the window, it realises it has to resize to the block and not the image. Mmmmm.

[Fotiman]

Seems to work for me with images as well:
[jsfiddle.net...]

Perhaps you can provide a sample base case that is failing?

[greencode]

It's a site that's currently in development in Wordpress. I'll try to grab a bit of the code and test locally first. I'll update this thread later on. Thanks for your help.

[greencode]

I managed to fix this by changing the first line of code from

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

to

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

[Readie]

Images can be a bit funny with javascript.

Calling this on document.ready will work in some browsers, but just give you 0 in others (For example, current Firefox gives you correct size, Chrome gives 0):

$(document).ready(function() {
var img = $('<img>').attr('src', '/images/an_image.png');
$('body:first').append(img);
console.log(img.height());
});

I seem to recall that .load is not 100% reliable in all browsers - but I was experiencing that problem about 3 years ago. It may no longer be an issue.

[Fotiman]

The problem is that document ready triggers when the DOM is ready, but before images have loaded. The window "onload" event happens after all images have loaded as well, which is why that works.