0

I'm using jQuery tinyscrollbar to horizontally scroll a set of images. Now I want to start it auto scrolling on page load keeping manual scroll option as well.

I came across answers explaining how to do it on a vertical tinyscrollbar but I couldn't get it modified to work on horizontal tinyscrollbar.

Can you please explain how to code it. This is the first time I'm using tinyscrollbar.

I downloaded it from http://www.baijs.nl/tinyscrollbar/

BrunoLM
  • 97,872
  • 84
  • 296
  • 452
Charith
  • 1
  • 1
  • 1
  • Auto scroll is not in those examples. I'm not good at jQuery, so I don't know how to go about it. Thanks. – Charith Jun 04 '13 at 17:17

2 Answers2

1

In the website examples, set it to horizontal

$('#scrollbar2').tinyscrollbar({ axis: 'x'});

To scroll via script

$('#scrollbar2').tinyscrollbar_update( 50 );

where 50 is the number in pixels. So to scroll automatically you can create a function with setInterval

setInterval(function() { /* scrolling code */ }, 1000); // every second...
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • When I downloaded the code from that site and used `$('#scrollbar2').tinyscrollbar({ axis: 'x'});` it didn't show any horizontal scroll bars. And when I view source on the example code on their site I found that they used a different method, and I just used that. So I'm not sure about this. Thanks – Charith Jun 04 '13 at 17:27
  • This won't work alone. You have to modify the css as well. See Jamie M's answer. – Foreever Feb 01 '14 at 21:22
1

Make sure you copy all the css too and download the images for bg-scrollbar-track-x.png, etc. The scrollbar won't render without it.

Here it is, just for reference (note i changed the id from "scrollbar2" to "scrollbar-x". You'll have to get the images from the tinyscrollbar site yourself:

#scrollbar-x { width: 800px; margin: 20px 0 10px; }
#scrollbar-x .viewport { width: 800px; height: 125px; overflow: hidden; position: relative; }
#scrollbar-x .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0;  }
#scrollbar-x .overview img{ float: left; }
#scrollbar-x .scrollbar{ background: #EDEDED url(../images/scrollbar/bg-scrollbar-track-x.png) no-repeat 0 0; position: relative; margin: 0 0 5px; clear: both; height: 15px; }
#scrollbar-x .track { background: transparent url(../images/scrollbar/bg-scrollbar-trackend-x.png) no-repeat 100% 0; width: 100%; height:15px; position: relative; }
#scrollbar-x .thumb { background: transparent url(../images/scrollbar/bg-scrollbar-thumb-x.png) no-repeat 100% 50%; height: 25px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: -5px; }
#scrollbar-x .thumb .end{ background: transparent url(../images/scrollbar/bg-scrollbar-thumb-x.png) no-repeat 0 50%; overflow: hidden; height: 25px; width: 5px;}
#scrollbar-x .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
Jamie M
  • 870
  • 1
  • 8
  • 18