Tuesday, November 4th, 2008
A Better Scrollable Component, Using jQuery
Nater Kane wrote in to share his experience creating one of those “scrollable” components:
I was having a bit of difficulty finding a jQuery plugin that not only provided scrolling behavior to a list of elements, but also used & then generated markup that could still be accessible, semantic & validate whether or not the user ran the javascript.
Nater took the existing jquery.scrollable.js plug-in by Tero Piirainen and enhanced it in the following ways:
1. make those items scrollable horizotally or vertically
2. decide how many items are visible at once
3. scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js)
4. make navigational buttons without programming
5. have programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
6. need to know when list is scrolled with custom event listener
7. You can now start with semantic markup
8. I want this all in single js file that weights only 3.9 4.1 Kb minified!
Check out Nate’s blog for more details, including the source.
Maybe I’m missing something, but trying to scroll through this makes me want to claw my eyes out.
This looks to me like another example of doing something just because you can, not because you should. It’s really slow and the mouse wheel support is worse than not having it at all. I can see how sometimes a scrollbar looks bad, but this is not the solution. Apologies to Nater Kane. I mean no personal offense, I have simply been down this path with no good coming of it.
link broken yet again.
why is ajaxian so bad at pasting links into a blog body?
@ilazarte: Because we usually write the posts in the wee hours of the morning when we’re dead tired. ;-) I’ve fixed the second link, sorry about that.
@generallyloud
The mousewheel support just piggybacked the separate jquery.mousewheel.js plugin that I did not write. it’s caveats are not something I could be responsible for.
This plugin came from a real world project, that had specific requirements, and would have been done slightly different if i had spent more than 2-3 hours writing it.
The speed of the scrolling is not fixed, but is variable and can be set with a parameter. What your experience was, in almost every way, can be adjusted with a few changes to the parameters that are set when the code is invoked.
This isn’t a bad idea, it’s just not a very good implementation. It has no support, for example, for acceleration, which is an absolute must when hijacking the scroll wheel.
It’s also important to note that tying behavior specifically to a scroll wheel is a usability nightmare for people who don’t have a scroll wheel (having up/down thumbs does not make up for the lack of a slider thumb).
it’s doesn’t require the mousewheel plugin. but if someone wants to make it available, it works and that interaction is supported. did any of you read the source? my guess is no.
Some more suggestions:
- Don’t “cache” click events. When I hammer the down button to get the thing to move to where I want, and I stop clicking, the scroller also needs to stop moving immediately.
- When clicking during a scroll, either speed up the animation, or skip it altogether, because it indicates the user is impatient and doesn’t want to wait until the end of the animation.
- When holding down the mouse button on the up/down buttons, keep scrolling.
.
@naterkane: don’t take all the criticism too personally. Most components that come on ajaxian get absolutely trashed in the comments. We’re all great at armchair coding.
Quite cool and nice looking, liked that it’s less than 4KB of JS, though the sample is NOT XHTML compliant (HTML validator complains) – which I think may be due to missing href attributes or something…
.
Apart from than, quite nice and good looking… :)