Stop dynamic width DIV from animating past it's edges

Question

I've got a DIV which contains a varying amount of items from a database. I've set the DIV to animate plus/minus 894px from it's current position when the next/prev buttons are clicked. I'm now trying to stop it from animating past 0px or past it's last child but am struggling to get it working without using a fixed width DIV. Does anyone know of a solution? Thanks

http://jsfiddle.net/Drennan/mMMfn/

$('#right').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#inner').animate(
                    {left:"-=894px"}, {
                        duration:'slow',
                        easing:'swing'
                });
            }
        );
    }
);

$('#left').each(
    function(){
        $(this).bind (
            "click",
            function(event){
                $('#inner').animate(
                    {left:"+=894px"}, {
                        duration:'slow',
                        easing:'swing'
                });
            }
        );
    }
);



});

score 1 · Answer 1 · answered Nov 05 '13 at 00:47

I've been playing around with your JSFiddle a bit.

Is this what you want it to do? http://jsfiddle.net/2cmNf/

I added an if statement to the 'next' function to test if the #inner div's last item was about to go off screen.

if ($('#inner').position().left + $('#inner').width() > 294) { //animate it to move left }

else { //do nothing, or maybe you could grey out the next button if there are no more items. Whatever you want. }

Stop dynamic width DIV from animating past it's edges

1 Answers1