views:

45

answers:

2

I am trying to make a carousel of sorts. I am kind of stuck with hiding and displaying the next and precious buttons once a div moves to the far left and right of its container.

I think i have everything correct regarding calculating the widths but for some reason when you click the buttons, elements stay hidden irrespective of the conditional comments which should dictate when they should be hidden or shown.

Here is a link to what i have thus far. Click the MoveLeft and MoveRight buttons. http://www.ehbeat.com/test/

<script type="text/javascript">
    $(document).ready(function () {

        //Check width of Gallery div
        var galleryWidth = $("#Gallery").innerWidth();

        //Check width of GalleryItem
        var galleryItemWidth = $(".GalleryItem").innerWidth();

        //Check distance from left
        var position = $('.GalleryItem').position();
        var galleryItemLeft = position.left;


        $(".MoveRight").click(function () {
            $(".GalleryItem").animate({
                "left": "+=50px"
            }, "slow");
            $(".GalleryItem2").animate({
                "left": "+=100px"
            }, "slow");
        });

        $(".MoveLeft").click(function () {
            $(".GalleryItem").animate({
                "left": "-=50px"
            }, "slow");
            $(".GalleryItem2").animate({
                "left": "-=100px"
            }, "slow");
        });

        $(".Controls").live('click', function () {
            if (galleryItemLeft >= "0") {
                $('.MoveRight').hide();
            }
            else {
                $('.MoveRight').show();
            }
        });

        if (galleryItemWidth == galleryWidth - galleryItemWidth) {
            $('.MoveLeft').hide();
        }


    });
</script>
A: 
Chris Gaudreau
A: 

Chris is right, code should look like this:

$(".Controls").live('click', function() {
    position = $('.GalleryItem').position();
    galleryItemLeft = position.left;

    if(galleryItemLeft > "0") { 
        $('.MoveRight').hide();}
    else{
        $('.MoveRight').show();
    }

    if(galleryItemWidth == galleryWidth - galleryItemWidth) {
        $('.MoveLeft').hide();
    }
});
d2burke
Thanks guys that did the trick! My buttons are display one click after they should, any way to fix this? The buttons dont exactly hide or show according to my conditions and it makes it look kind of broken =/http://www.ehbeat.com/test
salmon
It looks like the galleryItemLeft is being calculated before the animation occurred.
salmon
Salmon, Are you trying to hide the MoveRight and MoveLeft buttons when the larger slideshow is not longer visible, or the smaller?
d2burke