我想在我的网站上显示通知,AwNotices插件似乎是一个合适的解决方案。然而,问题是部分的高度始终为零,因此它不会向下推送任何内容,而是出现在同一部分上。
HTML:
<section class="awNotices">
<a notice-color="orange" href="http://adobewordpress.com" class=""><i class="fa fa-bell"></i>
<font><font> 'Tomorrowland' Is a Box-Office Disappointment</font></font></a>
<a notice-color="red" class="active"><i class="fa fa-heart"></i><font><font> Sunday Book Review: Shakespeare in Love</font></font></a>
<a notice-color="blue" class=""><i class="fa fa-desktop"></i><font><font> Overvalued in Silicon Valley, but Do not Say "Tech Bubble"</font></font></a>
<a notice-color="green" class=""><i class="fa fa-leaf"></i><font><font> Created for the World Health Emergency Fund Agency</font></font></a>
<a notice-color="dark" class=""><i class="fa fa-comments"></i><font><font> John Nash, Nobel Prize Winner, Dies in Crash.</font></font></a>
<span class="controller fa fa-pause"></span>
</section>
<div>
Hello World.
</div>
JS:
$('.awNotices').append('<span class="controller fa fa-pause"></span>');
$('.awNotices a:nth-of-type(1)').addClass('active');
function awNotice() {
if (!$('.awNotices').hasClass('stopped')) {
var $active = $('.awNotices a.active');
var $next = $active.next('a');
if ($next.length) {
$next.addClass('active');
$active.removeClass('active');
} else {
$active.removeClass('active');
$('.awNotices a:first-of-type').addClass('active');
}
}
}
$('.awNotices .controller').click(function () {
$(this).toggleClass('fa-pause fa-play');
$('.awNotices').toggleClass('stopped');
})
function awNotices(timer) {
setInterval("awNotice()", timer);
}
awNotices(2000);
我为它制作了一把小提琴:http://jsfiddle.net/pm3hz9x1/4/
我如何确保该部分自动占据其高度,并像它应该的那样向下推送所有内容?
我刚刚检查了你的小提琴,发现你的.awNotices a
有position:absolute;
,所以它不会在内容中发生实际位置(<section>
)。
如果我去掉它的位置,它是有效的,但它看起来很难看,因为您使用了visibility:hidden
。我去掉了可见性,用display none/block代替活动类。
现在它看起来很好,因为它应该是IMO。这是我用你的两个类修改的代码。
.awNotices a {
/* position: absolute; */
/* visibility: hidden; */
display: none;
}
.awNotices a.active {
/* visibility: visible; */
display: block;
}
上面的代码只显示更改后的特定CSS属性,您必须包含其他类属性才能获得预期的结果。请看一下我更新的小提琴!