Wednesday 14 December 2011

Custom scroll box

And here's another scrolling jQuery thing (it seems I spend my life scrolling things with jQuery these days!)
I've made this as customisable as I could think of at the time, but it should be relatively easy to add new features so either feel free to do so, or leave a comment with suggestions.
As always, fee free to take and use in any way you see fit.

http://www.johnmolyneux.co.uk/examples/new-scroller.html


Here's the options explained...
Option Default Meaning
width 500 The overall width of the scroller (does not include padding).
height 100 The overall height of the scroller (does not include padding).
padding 5 Padding inside the scroller, around the left/right buttons and around each image.
increment 500 The number of pixels that 1 click of an arrow will move the images.
speed 300 The time, in milliseconds, for each scroll.
reverse false Reverses the action of the left/right buttons. (I couldn't decide which way I prefer them.)
tolerance 50 How close, after a scroll, you need to be to the beginning or end of the images before just going to it. This is so that you don't get small scrolls at the end of a list, say you scroll 400 and the list is actually 410 wide. Without this tolerance you would need to scroll another 10 pixels to be sure you're at the end, and it just looks silly!


Rather than using the traditional { option: "value" } method, I wanted to make the code run without the need to add script to the page when adding the scroller div itself.  So, it automatically runs on every div with the class "scroller".  See the source code of the linked example to see how to set options.

No comments:

Post a Comment