CODEWITHSUNDEEP
javascriptjquerycsshtml
yoda
yoda

Reputation: 10981

Horizontal slide - defining start and end

I have a horizontal slide on a div (using relative positioning) that looks like this :

enter image description here

It slides left and right accordingly, but I'm having problems making it stop at both start and end of the slide container, so it ends up like this :

enter image description here

Here's the JS (jquery) :

$('.timeline-nav').on('click', function() {

    if (!anim)
    {
        anim = true;

        var pos = $(this).hasClass('left') ? 320 : -320;

        pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;

        $('.timeline-content-wrapper').animate({'left': pos}, 600, function() {
            anim = false;
        });
    }

    return;
});

Edit : live example

Upvotes: 3

Views: 335

Answers (4)

Karan
Karan

Reputation: 36

On fiddle : http://jsfiddle.net/ktszm/5/

        var max_width = 250;      
        var width_of_viewport = 200;            
        var stopper = max_width - width_of_viewport;  
        var container_position = $('.timeline-content-wrapper').position().left;



        if(container_position == 0 && $(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else if(container_position == (stopper*-1) && !$(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else 
        { 
           $('.timeline-content-wrapper').animate({'left': '+='+pos}, 600, function() {
                anim = false;
            });
        }
    }

​

Upvotes: 0

FrancescoMM
FrancescoMM

Reputation: 2960

See it all working here:

http://jsfiddle.net/yUe23/1/

I have changed some classes (timeline-content-wrapper) to ids and imagined some HTML around it (timeline-content-mask)

var anim=false;
var pos=0;
var originalPos=0;

$(function() {

    originalPos=$('#timeline-content-wrapper').offset().left;


    $('.timeline-nav').click( function() {

        if (!anim) {

            var $wrapper=$('#timeline-content-wrapper');
            var $mask=$('#timeline-content-mask');        

            var pos = $(this).hasClass('left') ? 200 : -200;
            var wid=$wrapper.width();
            var maskWid=$mask.width();
            var oldPos=$wrapper.offset().left;

            anim = true;

            // alert(parseInt($wrapper.offset().left)+" "+pos+" "+originalPos+" "+originalPos+" "+wid+" "+maskWid);

            pos = parseInt($wrapper.offset().left)-originalPos + pos;

            if(pos<-wid+maskWid) pos=-wid+maskWid;
            else if(pos>0) pos=0;

            $wrapper.animate({'left': pos}, 600, function() {
                anim = false;
            });

        }

        return;
    });


});

Upvotes: 2

looper
looper

Reputation: 1979

pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;
if (pos < -1120) pos = -1120;
if (pos > 0) pos = 0;

The code could be shorter, but that's more understandable :). The first if depends on the width of the elements; maybe you need to change it or calculate at runtime.

Upvotes: 2

user1726343
user1726343

Reputation:

How about this:

pos = Math.min(parseInt($('.timeline-content-wrapper').css('left')) + pos, 0);

I'm assuming the wrapper div isn't supposed to have a positive left value.

Upvotes: 0

Related Questions