Question

JSFiddle – fixed height(s)

JSFiddle – problem

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?

Answer 1

You need to use JS to keep track of how many lis 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();