CODEWITHSUNDEEP
jqueryhtmlcsstimeline
Kiwimoisi
Kiwimoisi

Reputation: 4192

Scroll To Horizontall issues, timeline jquery

I am experiencing issues with my scrollTo, it doesn't seem to scroll to the horizontal anchor points.

Looks like the positions of the anchors are resetting themselves.

http://jsfiddle.net/6nqv78wp/7/

$(".jq-timeline-header").click(function (e) {
    if ($(window).width() < 768) {
        $(this).next().toggle();
    }
});


$('.jq-scrollto').bind('click', function (event) {
    console.log($($(this).attr('href')).offset().left)
    $('.jq-scrollto').removeClass('active');
    $(this).addClass('active');
    $('.jq-timeline-inner').stop().animate({
        scrollLeft: $($(this).attr('href')).offset().left
    }, 1000);
    consoleLog();
    event.preventDefault();
});

var x, y, top, left, down;

$(".jq-timeline-inner").mousedown(function (e) {
    e.preventDefault();
    down = true;
    x = e.pageX;
    y = e.pageY;
    top = $(this).scrollTop();
    left = $(this).scrollLeft();
});

$(".jq-timeline-inner").mousemove(function (e) {
    if (down) {
        var newX = e.pageX;
        var newY = e.pageY;

        //console.log(y+", "+newY+", "+top+", "+(top+(newY-y)));

        $(this).scrollTop(top - newY + y);
        $(this).scrollLeft(left - newX + x);
    }
});

$(".jq-timeline-inner").mouseup(function (e) {
    down = false;
});

Upvotes: 1

Views: 263

Answers (1)

ketan
ketan

Reputation: 19341

Change in JQuery will solved your issue:

 $('.jq-scrollto').bind('click', function (event) {

        console.log($($(this).attr('href')).offset().left);

        $('.jq-scrollto').removeClass('active');
        $(this).addClass('active');


        $('.jq-timeline-inner').stop().animate({
            scrollLeft:  $($(this).attr('href')).offset().left + $('.jq-timeline-inner').scrollLeft()  //Changes here.
        }, 1000);
        event.preventDefault();
    });

Check Fiddle Here.

Upvotes: 2

Related Questions