Question

I have the following code. „YellowLeft“ and „YellowRight“ are buttons that move tabs tot he left or right. On startup oft he page I want „YellowLeft“ to hide since I can’t move the tabs to the left in the beginning. Once I scroll back to the beginning I want that button to disappear again.

To do that I have a variable called newPos which checkes if offset holds the same value. If it does, the „YellowLeft“ button should disappear again. But in theory the offset value never changes although I move the tabs to the left. So newPos and offset always hold the same value and the button disappear on the first click.

Where is my mistake?

Thanks!

$(document).ready(function()
        {

            $("#YellowLeft").hide();
            var offset = $("#Tab1").offset();
            var newPos = offset;
            newPos.left = offset.left;

            $("img").click(function()
            {
                var tabs_list = $("div#TabsWrapper > ul");
                if($(this).is("#YellowRight"))
                {
                    tabs_list.animate({ left: "-=155" }, 500);
                    $("#YellowLeft").show();
                    alert(newPos.left);
                }
                else if($(this).is("#YellowLeft"))
                {
                    tabs_list.animate({ left: "+=155" }, 500);

                    if (newPos.left == offset.left) {
                        $("#YellowLeft").hide();
                    }
                }
            });
        })

Answer 1

It would be useful to see the relevant HTML code, but I think you need to change the line:

if (newPos.left == offset.left) {

to:

if ($('#Tab1').offset().left == offset.left) {