Question

I currently have a div that acts like a “gallery” so to speak.

 div #Images {
    max-height:90%;
    height:500px;
    position:relative;
    overflow:hidden;
}

Due to the nature of this div, I have to put a height for it, otherwise the images don’t show up. What I want to do though is set the height using JQuery to be the height of the tallest image in the list. So I’m doing this:

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

 $(document).ready(function() {
     var imageHeight = 0;
        $("#wrap").find("img[id*='car_']").each(function(i) {
                       if (imageHeight < $(this).data('origHeight'))//.height())
                imageHeight = $(this).data('origHeight');
                 });
      if (imageHeight > 0)
        $("#Images").css('height', imageHeight);
      else
        $("#Images").css('height', 500);
  });
});

Unfortunately, imageHeight never becomes anything but 0. Here’s the kicker …. if I add an alert(imageHeight); inside of the .each() the first time it is 0, but every time after that it populates with the proper value…. I’m assuming because of the popup interrupting the code for a small period of time, the browser has time to fully load all images and grab the proper height.

Unfortunately I’m not about to leave a popup in there just to populate my height properly every time.

What am I doing wrong?

Answer 1

This does the same thing but is much clearer:

$(window).load(function() {
    var imageHeight = 500;
    $("#wrap").find("img[id*='car_']").each(function(i, o) {
        imageHeight = Math.max(imageHeight, $(o).height());
    });
    $("#Images").css('height', imageHeight);
});