Reputation: 5553
I have a ul with a fixed height. There are two buttons (#up) and (#down) that scroll through the remaining elements when clicked. I would like to remove the fixed height on the ul to allow for varying lengths of copy in each li (currently it allows 3 li's with a max height of 90px). It works when the height of the ul and max-height of li's are defined, removing them shows more than the desired (4) amount of li's.
CSS:
#container ul {
height:400px;
margin: 1em 0 0 0;
padding: 0;
position: relative;
overflow: hidden;
}
#container ul li {
display: none;
min-height: 90px;
font: 0.9em/1.25em Arial, Helvetica, sans-serif;
color: #121c39;
padding: .5em;
border-bottom: 1px dotted #121c39;
background: transparent;
overflow: hidden;
}
#container ul li span {
display: block;
font: bold 1.125em Arial, Helvetica, sans-serif;
}
#container ul li a {
display: block;
color: #121c39;
}
HTML:
<div class="fourcol">
<div id="container">
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>
<h2>New Arrivals</h2>
<ul>
<li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
<li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
</ul>
</div>
and the JS
$('#up').click(function(e){
var first = $('#container ul li:first');
first.hide('fast',function(){
$('#container ul').append(first.show(500));
});
e.preventDefault();
});
$('#down').click(function(e){
var last = $('#container ul li:last');
last.hide('fast',function(){
$('#container ul').prepend(last.show(500));
});
e.preventDefault();
});
I can get the ul to only show the first 4 (or whatever li's) with this
$('#container > ul > li:lt(4)').show();
I would like the ul to only show 4 items and scroll through, showing only 4 at a time and keeping them in order. How do I apply the $('#container > ul >li:lt(4)').... on each click?
Upvotes: 0
Views: 274
Reputation: 191829
You need to use JS to keep track of how many li
s are showing at one time. A CSS solution does not seem possible with varying heights. Something like this:
//after up/down clicks:
$("li:gt(3)").hide();
Upvotes: 1