Question

I’m looking help with an If Statement. I’m trying to finalize this horizontal scrolling I have and the last bit is to not just disable scrolling when the end is reached, but to also disable (well, change color) the scroll buttons at that point as well. And change back when they are scrollable again.

http://jsfiddle.net/stfzy/83/

EDIT* I’ve updated the JQuery and have everything working except just one if statement:

$('div#arrowL').click(function(){
    if(index < 0 ){ //can't scroll
        $('div#arrowL').addClass('active');
    }
});        

I need to add this class back when you can’t scroll left anymore. And I think the issue is with the “index < 0” portion but I don’t see what I need to change it to to get it to work.

Any help is appreciated.

Answer 1

your if(index... statements will only run when page loads. They need to be in your click handlers in order to check current state. Since you already have the reverse test, simply add an else

$('div#arrowR').click(function() {
    if (index < endIndex) {
        index++;
        $item.animate({
            'left': '-=300px'
        });
        $('div#arrowR').removeClass('active');
    }else{       
        $('div#arrowR').addClass('active');
    }
});

DEMO: http://jsfiddle.net/stfzy/48/