Small scroller
This is just a demonstration of what a small scroller looks like. Sometimes you just need a little scrolling widget for a small area of the page. This is easily accomplished by setting some styles on the element that you convert into a scroller. In this example the CSS looks like this:
#smallScroller
{
width: 150px;
height: 50px;
position: relative;
border: solid 1px #ccc;
}
I have also overridden the CSS of the hot spots to make them somewhat smaller. In the default CSS they are set to a minimum of 75px which is way too big for this 150 pixel wide scroller:
div.scrollingHotSpotLeft, div.scrollingHotSpotRight
{
min-width: 35px;
}
One thing that I noticed when I created this example was that you percieve the scroller as going way too fast eventhough it may have the same speed as a big scroller. I think it's because the viewing scope is so small and you don't get enough time to see each image that scrolls by. To compensate for this I set the parameter scrollStep to 2 and scrollInterval to 5. The default values in Smooth Div Scroll is scrollStep: 15 and scrollInterval: 10.
A special thanks to turbomilk.com for letting me use the cute icons! :-)