Question

This may be an easy question and perhaps I am missing something here.

The desired effect would be when a user clicks on the .left or .right href tags, the .tabs scroller will scroll left or right by 105px every time. This part is working.

Where I am running into a road block is how to disable the animate effect when the .tabs div’s css is at 0px or at the end of the div. This seems like it could easily be accomplished with offset or position but both of these are giving me a different value. I believe it’s because the .tabs div is actually centered using magin: 0 auto.

Trying to retrieve the css("left") and writing a conditional if == 0 statement is also a bust.

Am I missing something here? Should I not be trying to disable the left button based on position? Is there an easier way to do this?

$(".right").click(function () {
    $(".tabs").animate({
        left: '-=105'
    }, 500);
    return false;
});
$(".left").click(function () {
    $(".tabs").animate({
        left: '+=105'
    }, 500);
    return false;
});

Answer 1

Based on comments in his question,

$(".tabs").css('left') returns value in px

So, to compare, either you do

$(".tabs").css('left') === '0px'

OR

parseInt($(".tabs").css('left')) === 0