Find minimum height of div with changing content so that page below doesn't jump around

Question

I have a testimonial section of a webpage that I'm developing and it will simply cycle through a number of different testimonial comments using jQuery fadeIn() & fadeOut()

If I don't dictate the height of the section to a set height then the height will change according to the length of the testimonial comment and the rest of the page below will jump around.

As I am creating this site using Wagtail (Django based CMS) and so I want to be able to automate calculating the appropriate sized section height according to the longest testimonial comment.

Here is the code that I have so far:

HTML:

<section class="bg-primary testimonial-wrapper" id="testimonials">
          <div class="container">
            <div class="row">
              <div class="col-xs-2 col-xs-offset-2">
                <i class="fa fa-4x fa-quote-left"></i>
              </div>
              <div class="col-xs-6 testimonial-wrapper">
                <div class="testimonial-item">
                  <p>Testimonial comment 1.</p>
                  <p><em>- Oliver Nicholson</em></p>
                </div>
                <div class="testimonial-item">
                  <p>Another quote!</p>
                  <p><em>- Nollie Bollie</em></p>
                </div>
              </div>
            </div>
          </div>
        </section>

jQuery/JS:

$(document).ready(function() {

  var testimonials = $(".testimonial-item");
  testimonials.hide();
  var testimonialIndex = -1;

  function showNextTestimonial() {
    ++testimonialIndex;
    testimonials.eq(testimonialIndex % testimonials.length)
    .fadeIn(2000)
    .delay(500)
    .fadeOut(2000, showNextTestimonial);
  }

  showNextTestimonial();

});

Is there any way to calculate the min-height of testimonial-wrapper so that the testimonial-wrapper section is able to accommodate every comment without changing size when transitioning from one comment to the next?

Thank you both Fredrick & seahorsepip. Both of your suggestions work as expected. I +1'd both of your answers but accepted seahorsepip's because it seems a little more simple. I really appreciate both of your support though! — oldo.nicho, Feb 09 '16 at 04:07

score 1 · Answer 1 · edited May 23 '17 at 11:45

You can loop through the items and find the max height and then set the container to that height.

See accepted answer here: element with the max height from a set of elements

working code example:

$(document).ready(function() {
    var wrapper = $('.testimonial-wrapper');
  var testimonials = $(".testimonial-item");
  //from accepted answer here: https://stackoverflow.com/questions/6060992/element-with-the-max-height-from-a-set-of-elements
  var maxHeight = Math.max.apply(null, testimonials.map(function ()
    {
        return $(this).outerHeight();
    }).get());
  wrapper.height(maxHeight);

  testimonials.hide();
  var testimonialIndex = -1;

  function showNextTestimonial() {
    ++testimonialIndex;
    testimonials.eq(testimonialIndex % testimonials.length)
    .fadeIn(2000)
    .delay(500)
    .fadeOut(2000, showNextTestimonial);
  }

  showNextTestimonial();

});

jsfiddle https://jsfiddle.net/dattaproffs/h3pu6y25/1/

/F

I'd suggest to use outerHeight(), you want to be sure to include padding. — seahorsepip, Feb 06 '16 at 13:36

score 1 · Accepted Answer · answered Feb 06 '16 at 13:34

https://jsfiddle.net/seahorsepip/jztcnoah/

  //Get max height
  var wrapperHeight = 0;
  testimonials.each(function() {
    wrapperHeight = $(this).outerHeight() > wrapperHeight ? $(this).outerHeight():wrapperHeight;
  });
  //Set max height
  $(".testimonial-wrapper").height(wrapperHeight);

Find minimum height of div with changing content so that page below doesn't jump around

2 Answers2