CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liam
Liam

Reputation: 9855

Make all list items same height as the tallest

I have a quiz i'm creating and there are 4 list items that are output on each question, the answer in each question differs in height...

enter image description here

I want to write a script that runs and sets all the divs to the same height as the biggest...

I have the following only if my answer has an image, it calculates the hiehgt before the image has finished loading and then sets the height so its fairly buggy, can anybody see a better way of me writing this? 

function resizeAnswers(){
    var maxHeight = 23;

   $('.text-answers li').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.text-answers li').each(function() {
     $(this).height(maxHeight);
   });
}

Upvotes: 0

Views: 616

Answers (1)

gwcoffey
gwcoffey

Reputation: 5929

To wait until all images have loaded, call your code when the window is finished loading:

$(window).load(function() {
   resizeAnswers();
});

Note that this will wait for ALL images to load, which may be a problem depending on the nature of your site. If it is a problem, you can wait for just the images in your list items to load, but that is more complicated.

Also, you have this:

$('.text-answers li').each(function() {
   $(this).height(maxHeight);
});

But this will do the exact same thing:

$('.text-answers li').height(maxHeight);

jQuery will happily apply most operations to a set of elements.

Upvotes: 1

Related Questions