Question

I have a vertical slider that works well except when it needs to scroll more than once.

view slider

This is the code

$(document).ready(function() {
    var speed = 1050;
    var elementHeight = 106;
    var countElements = $('#portfolio-navigation ul li');
    var numberElements = countElements.length;
    var totalHeight = numberElements * elementHeight;
    var containerHeight = 742;

    var currentPlace = elementHeight * 7;
    var currentDifference = 0;
    $("#up").addClass("nogo"); 
    $("#down").click(function(event) {
        $("#down").addClass("nogo");
        $("#up").removeClass("nogo");
        event.preventDefault();
        if (currentPlace >= totalHeight) { 
        } else { // Ellers, continue!
        currentPlace += elementHeight;
        currentDifference += elementHeight; 
            $("#portfolio-navigation ul").animate({ top: "-510px"}, speed );
        }   
    });
    $("#up").click(function(event) {
         $("#down").removeClass("nogo");
         $("#up").addClass("nogo");
        event.preventDefault();

        if (currentPlace <= containerHeight) { 
        } else { // Ellers, continue!
        currentPlace -= elementHeight;
        currentDifference -= elementHeight; 
            $("#portfolio-navigation ul").animate({ top: 0 + "px"}, speed );
        }   
    });
});

I want to be able to make the slider scroll down more than once.

Any ideas?

Cheers
Nik

Answer 1

I’m not sure I understand your question, but generally you would want to shift the UL up and down until it it gets to the end of the list. This is easy enough to do when you have a fixed-height container. Just subtract 510px in your animation on the next button instead of setting it to -510px. After that, use your totalheight and containerheight variables to figure out when to disable the buttons (I would suggest using if/else) statements instead of adding and removing classes).