[英]Find minimum height of div with changing content so that page below doesn't jump around
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()
我有一个正在开发的网页的推荐部分,它会使用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. 当我使用Wagtail(基于Django的CMS)创建此站点时,因此我希望能够根据最长的推荐注释自动计算适当大小的截面高度。
Here is the code that I have so far: 这是我到目前为止的代码:
HTML: 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: 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? 有什么方法可以计算
testimonial-wrapper
的min-height
,以便在从一个评论过渡到下一个评论时, testimonial-wrapper
部分能够容纳每个评论而无需更改大小?
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/ jsfiddle https://jsfiddle.net/dattaproffs/h3pu6y25/1/
/F /F
https://jsfiddle.net/seahorsepip/jztcnoah/ 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.