[jQuery] Hide li elements if total ul height > container height
Hi guys,
What I'm trying to do is hide list elements if their combined height
is greater than my container div. I've got a start, but it's not
perfect.
My current script hides the last-child if their combined height >
406px, but there's still the possibility that it should hide more than
the last element.
Any advice? Some sort of a loop?
<script type="text/javascript">
$(function() {
var heightTotal = 0;
$('#newsEvents ul li').each(function(){
heightTotal += +$(this).height();
if ($(heightTotal > "406"))
{
$('#newsEvents ul li:last-child').hide();
}
});
});
</script>
<div id="newsEvents">
<h3 class="homeHeader">News and Events</h3>
<ul class="list">
<li><a href="#">New STG4000 Stimulus Generators</a></li>
<li><a href="#">Upcoming European Workshops</a></li>
<li><a href="#">Summer School for the Educator 2009 USA</a></li>
<li><a href="#">ADInstruments Enters Multi year Partnership with
The Jackson Laboratory</a></li>
<li><a href="#">International Safety Standards</a></li>
<li><a href="#">Human Anatomy and Physiology Society Meeting</a></
li>
<li><a href="#">Biomedical Engineering Society</a></li>
<li><a href="#">Society for Neuroscience</a></li>
<li><a href="#">American Heeart Association Scientific Sessions</
a></li>
</ul>
</div>