CODEWITHSUNDEEP
jqueryhtmldom
Jamie
Jamie

Reputation: 373

How can I equalize the heights of divs in table based on the tallest div using jQuery?

I am creating a page that has a table with a bunch of images in it. Each image is wrapped in a set of divs. The images are user-added, so I have no control over the aspect ratio, but I will be enforcing a maximum width and height on uploaded images.

<table class="pl_upload"> 
  <tr class="row1"> 
    <td class="col1"> 
      <div>
        <div class="img-container">
          <a href="#"><img src="img.jpg" width="182"  alt="X" /></a>
        </div>
      </div> 
    </td>
    .......

What I would like to do is calculate the height of the tallest image div in the table, and then make the all of the image divs that same height using jQuery.

I made a jsfiddle page for it here:

http://jsfiddle.net/Evolution/27EJB/

Upvotes: 0

Views: 288

Answers (3)

Mark Coleman
Mark Coleman

Reputation: 40863

Not sure exactly what you are looking for, however this should be able to get the tallest image on the page and then set the div's on the page to that height.

Also, per this answer if you wrap the function in $(window).load() it should only be called once all images are loaded.

$(window).load(function() {
    var tallest = 0;
    $("img").each(function() {
        var h = $(this).height();
        if (h > tallest) {
            tallest = h;
        }
    });
    $("div").css("height", tallest);
});

Example on jsfiddle.

If this is not what you need please elaborate your question a bit.

Upvotes: 1

stef
stef

Reputation: 14268

var max = 0;

$(".pl_upload img").each(function() {
 if($(this).height() > max) {
  max = $(this).height();
 }
});

$(".img-container").height(max);

Upvotes: 2

RobertPitt
RobertPitt

Reputation: 57268

Would something like this be what your looking for:

var Max = 0;
var Images = $(".img-container img");

Images.each(function(k,v){
    $(this).load(function(){
        if(Max < $(this).height())
        {
            Max = $(this).height();
        }

        if(k == Images.length)
        {
            $(".img.container").height(max);
        }
    });
})

Test Case: http://jsfiddle.net/27EJB/1/

Im not saying it works exactly how you want it but from your description this is what i come up with.

Upvotes: 0

Related Questions