(Another) Scrollable Plugin for jQuery
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.
The best plugin that I could find that was already out there was Tero Piirainen's jquery.scrollable.js. If you check it out you'll quickly see that the markup that's used to generate the scrolling items could be improved upon. Nothing in my version of jquery.scrollable.js removes functionality from what Tero put together, and the improvements are basic.
- make those items scrollable horizotally or vertically
- decide how many items are visible at once
- scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js)
- make navigational buttons without programming
- have programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
- need to know when list is scrolled with custom event listener
- You can now start with semantic markup
- I want this all in single js file that weights only
3.94.1 Kb minified!
First we start with simple & semantic markup
There's nothing fancy going on here at all, just a wrapping element, an anchor and an unordered list. Unfortunately due to the design requirements of this particular implementation, an additional <div> had to be added. If it wasn't for the creative constraint, and the lack of support for vertical-align: middle across many browsers, this extra <div> would have not been included.
Presentation
Now we add styling that makes it match the look & feel of the main site.
The css required to make this bit work for you will be different for every project, so take a look at the included styles and tweak as necessary.
And now for the behavior
If the user's browser allows javascript to run, we add some additional unobtrusive behavior (including mousewheel support)
-
jQuery(function( $ ){
-
/**
-
* make sure the CSS knows that we're modifying the DOM and then style accordingly
-
**/
-
$('.scrollable').addClass('js');
-
/**
-
* If you have an element you'd like to use the same style, but not attach the
-
* behavior you can turn it off by first adding the scrollable classname, but making
-
* sure the js classname is not applied to the element (this is what I did to show the
-
* "no javascript" version in the second example). Keeping the use of the scrollable
-
* classname for the general styles prevents having to write redundant styles
-
**/
-
$('.scrollable.nojs').removeClass('js');
-
/**
-
* a little DOM modification to keep all of the markup valid
-
**/
-
$('.scrollable.js ol').attr('id','items').wrap('<ul><li></li></ul>');
-
$('.scrollable.js ul>li').attr('id','itemswrapper');
-
var emptyLinkTarget = (window.opera) ? "#" : "javascript:function(){return}"; // a hash breaks a few flavors of IE & a javascript link (though it's poor form) breaks Opera.
-
$('.scrollable.js ul').prepend('<li><a class="prev" href="'+emptyLinkTarget+'"><<</a></li>').append('<li><a class="next" href="'+emptyLinkTarget+'">>></a></li>');
-
/**
-
* and now we initiate
-
**/
-
$('.scrollable.js').scrollable({
-
size:3,
-
horizontal:false,
-
duration:1500,
-
items:'#items',
-
prev:'.prev',
-
next:'.next'
-
});
-
});
This is the generated source we end up with... There's one thing you might notice, and that's the div class="__scrollable", though I initially placed that element outside of it's parent ol it did not work. It has something to do with how the xhtml 1.0 strict doctype is handled by the browsers. Though this may work in HTML 4.0 or various browser quirks modes, I haven't specifically tested all possible cases.
-
<div class="scrollable js">
-
<a href="#" class="more-link">More News</a>
-
<li id="itemswrapper">
-
<ol style="overflow: hidden; position: relative; visibility: visible; height: 124px;" id="items">
-
<div class="__scrollable" style="position: absolute; height: 200000em;">
-
</div>
-
<br clear="all"/>
-
</ol>
-
</li>
-
</ul>
-
</div>
This build is currently in a non-public svn repository, but I will be moving it to google code or github shortly (depending on whether or not I feel like learning how to use Git)
- Standalone Demo:
- http://www.naterkane.com/sandbox/scrollable/
- Download:
- First you'll of course need jQuery v.1.2.6
- jquery.scrollable.js (7.5k)
- jquery.scrollable.min.js (4.1k)
- scrolling-list.css – the stylesheet used for the example
- You can also grab a copy of
jquery.mousewheel.jshere
Feed
LinkedIn
Facebook
del.icio.us
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
November 12th, 2008 at 9:14 pm
Can you extend this to allow adding and removing of navigation items?
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 2nd, 2009 at 5:38 am
this looks great, congrats
January 29th, 2009 at 7:27 pm
Thanks for the info. May God have mercy on us all.
February 10th, 2009 at 9:09 pm
god bless your blog my friend :)
March 29th, 2009 at 1:48 pm
Thank you for sharing this information.
Fidelity 401k
September 14th, 2009 at 2:19 am
To create is very doughty decision. I hope you’ll anticipate more the pressures that may push customers into using essay writing services, and the ways we might try to facilitate those encumbrance and not simply mingle them. Anyway, thanks for the design for augment the materiality of essay writing for those who value it as a quality of learning exercise.
http://www.bestwritingservice.com
October 14th, 2009 at 12:04 am
A lot students give the duty to expert resume writers because they don't have the talent to write a satisfactory resume in that the reason why people
need to resume writer, but such people like creator don't do that. Thanks for the information. Very interesting topic about this.
October 17th, 2009 at 2:19 am
You make very perfect contribution just about Nater! So, the dissertation writing service or some thesis writing services, could use in the best dissertation.
October 29th, 2009 at 4:42 pm
it can be expanded to add and remove items, however the init script would have to be rewritten to also be attached to a custom even that's fired when those items are added or removed.
November 22nd, 2009 at 2:02 pm
You should apply css - overflow: hidden - to the buttons and perhaps - outline: none - as they are extending outline far to the left.
Apart from this great tutorial - thanks for sharing!
November 22nd, 2009 at 7:02 pm
You should apply css - overflow: hidden - to the buttons and perhaps - outline: none - as they are extending outline far to the left.
Apart from this great tutorial - thanks for sharing!
February 22nd, 2010 at 12:02 am
[...] (Another) Scrollable Plugin for jQuery [...]
March 1st, 2010 at 6:44 am
[...] Scrollable Plugin for jQuery [...]
July 23rd, 2010 at 4:23 pm
[...] 31-Scrollable Plugin for jQuery [...]