How can I move the scrollbars automatically inside a div tag

Question

I have a div with large data. I have used overflow property to hide the extra data and now I want my scroll-bar to move automatically to the left to a position from where 4th, 5th, 6th element of 1st row and 4th, 5th, 6th, element of 2nd row will be visible. then after few seconds i want the scrollbar move more to the left so that 7th,8th,9th of 1st row and 7th,8th,9th element of second row will be visible

How it can be done. Is there any javascript/jQuery plugins to resolve my problem.
Here is my JsFiddle

@AustinBrunkhorst Right? I was thinking "JsFiffle? Like it!" OP: Have you even attempted any efforts in finding out yourself? These might be the jQuery methods you're looking for: [scrollTop](http://api.jquery.com/scrollTop/) [scrollLeft](http://api.jquery.com/scrollLeft/) — Kiruse, Jun 03 '13 at 04:56
On topic @Aadietya - do you want the box to come into view when the user clicks on it? You need to elaborate more on the behavior you want. — Austin Brunkhorst, Jun 03 '13 at 04:58
i want 1st, 2nd, 3rd image of 1st row and 1st, 2nd, 3rd element of 2nd row to display first inside the div. then after few seconds i want 4th,5th,6th element of 1st row and 4th,5th,6th element of 2nd row to be appear only in the div. then after few seconds i want only next set of 6 image to come in the div. — shubendrak, Jun 03 '13 at 05:03
@Aadietya I've posted an answer of this on your [another question](http://stackoverflow.com/q/16867774/1823761). [Check that](http://stackoverflow.com/a/16890452/1823761). — , Jun 03 '13 at 05:28

score 3 · Answer 1 · edited Jun 03 '13 at 05:15

3

I think 'scroll="auto"' should do the trick.
But you need to you place it in the BODY tag of the popup.

edited Jun 03 '13 at 05:15

answered Jun 03 '13 at 05:03

Vamsi Pamula

147
1
3
13

BrunoLM · Accepted Answer · 2013-06-03T06:46:37.477

1

See this example on jsFiddle

You just have to set the .gallery scrollLeft

var autoscrollTimer;

function cancelscrolling()
{
    clearTimeout(autoscrollTimer);
}

function autoscroll()
{
    var gal = $(".gallery");

    // don't cancel if it is the code scrolling
    gal.off("scroll");

    gal.animate({ scrollLeft: "+=" + gal.width() },
                function() {
                    setTimeout(function(){
                        // when the animation ends re-add the code
                        // to stop scrolling if the user scrolls
                        gal.on("scroll", cancelscrolling);
                    }, 1);
                });

    // if still not in the end, continue scrolling
    if (gal.get(0).scrollWidth > (gal.get(0).scrollLeft + gal.width()))
        autoscrollTimer = setTimeout(autoscroll, 3000);
}

$(".gallery").on("scroll", cancelscrolling);

// starts the loop
autoscroll();

To start over see this other version

edited Jun 03 '13 at 06:46

answered Jun 03 '13 at 05:09

BrunoLM

97,872
84
296
452

i dont want the scrollbar to move completely to the end. i want the scrollbar to move to the left to a position from where 4th, 5th, 6th element of 1st row and 4th, 5th, 6th, element of 2nd row will be visible. then after few seconds i want the scrollbar move more to the left so that 7th,8th,9th of 1st row and 7th,8th,9th element of second row will be visible. – shubendrak Jun 03 '13 at 05:14
@Aadietya I've updated the code to do that, does it work for you? – BrunoLM Jun 03 '13 at 05:30
yes, that worked. but after the scrollbar reached end i want it to return to starting point and continue the same – shubendrak Jun 03 '13 at 05:37
Actually it reached almost the end and you might have moved the scroll. That's a "little bug", run again and wait 3s after it reaches the end. – BrunoLM Jun 03 '13 at 05:42
To fix it I guess you could add something to detect if the user scrolls manually you cancel the loop. I'm not sure how to do that, I could try something. – BrunoLM Jun 03 '13 at 05:47
i waited for three seconds. the scrollbar is not moving back to its starting position – shubendrak Jun 03 '13 at 05:52
I've updated again, with that implementation it will stop scrolling if the user interferes with the animation – BrunoLM Jun 03 '13 at 05:53
i checked the demo on jsfiddle. it's not working the way i want to. the scrollbar just stops inbetween – shubendrak Jun 03 '13 at 06:06
It seems that `animate` callback was called before it ended completely. So I added a `setTimeout` with 1ms, seems to be working. – BrunoLM Jun 03 '13 at 06:26
the last line `autoscroll();` does not seems to work. once the scrollbar reach the end it never comes back to the starting point and continue the same animation – shubendrak Jun 03 '13 at 06:36
Do you want it to start over? Well, I made it so it would stop at the end. You can change and add an `else` to scroll to 0 – BrunoLM Jun 03 '13 at 06:42
yeah, i wanted it to start again. – shubendrak Jun 03 '13 at 06:43

score 1 · Answer 3 · answered Jun 03 '13 at 05:36

Hi you can make the code like this

$(document).ready(function(){
    lastElementLeft = $('.demo').position().left ;
    scrollAmount = lastElementLeft + 200 ;
    //alert(scrollAmount);

$('.demo').animate({scrollLeft: scrollAmount},1000);
});

and the demo is here http://jsfiddle.net/uaewc/307/

How can I move the scrollbars automatically inside a div tag

3 Answers3