Question

Alright. I am completely stumped here.

I have a horizontal scrolling list that, when you cannot scroll anymore, the button/arrow changes color (via addClass removeClass). My fiddle works (almost) perfectly. My code on the other hand does not…

The fiddle: http://jsfiddle.net/4rKPT/8/

jQuery:

$(document).ready(function() {

    var $item = $('div.mainBodyContentListItem'),
        //Cache your DOM selector
        visible = 2,
        //Set the number of items that will be visible
        index = 0,
        //Starting index
        endIndex = ($item.length / visible) - 1; //End index
    $('div.mainBodyContentArrowR').click(function() {
        if (index < endIndex) { //can scroll
            index++;
            $item.animate({
                'left': '-=592px'
            });
        }
    });

    $('div.mainBodyContentArrowR').click(function() {
        if (index > endIndex) { //can't scroll
            $('div.mainBodyContentArrowR').addClass('disable');
        }
    });

    $('div.mainBodyContentArrowR').click(function() {
        if (index < endIndex) { //can scroll
            $('div.mainBodyContentArrowL').removeClass('disable');
        }
    });



    $('div.mainBodyContentArrowL').click(function() {
        if (index > 0) { //can scroll
            index--;
            $item.animate({
                'left': '+=592px'
            });
        }
    });

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

    $('div.mainBodyContentArrowL').click(function() {
        if (index > 0) { //can scroll
            $('div.mainBodyContentArrowR').removeClass('disable');
        }
    });


});

This works as it should (except haven’t figured out how to fix the issue that going back left and hitting the end of the scroll again, as it was when the page loads, doesn’t add the class back and change the color – feel free to address, but it’s not the issue of this thread).

My actually code does it correctly in this instance:

 $('div.mainBodyContentArrowR').click(function() {
            if (index < endIndex) { //can scroll
                $('div.mainBodyContentArrowL').removeClass('disable');
            }
        });

But nowhere else. I am stumped here. The odd thing is, that line I’ve outlined above is working properly. The ‘disable’ class is being removed on the first click and then those addClass removeClass lines don’t do anything (the scrolling back and forth does work and stop properly).

Please any help is appreciated. I feel like I’m just staring at a 50 foot brick wall and just can’t see my way through or over.

Answer 1

If you change

if(index < endIndex)

to

if(index <= endIndex)

Does it work?

The other problem that you have mentioned ( not the topic of this thread should also get fixed if

if(index > 0)

is changed to

if(index >= 1)

I knew the problem you mentioned in the comment was coming. To fix that problem you would need to add following line after the line that calculates the end index

if(($item.length % visible) == 0){
    enIndex = endIndex - 1;
}