(Another) Scrollable Plugin for jQuery

in javascript, semantic web | Friday, October 31st, 2008 | 35 Comments » Trackback

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.9~~ 4.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.

PLAIN TEXT

HTML:

<div class="scrolling-list">
    <a href="#newspage" class="more-link">More News</a>
  <ol>
        <li><div><a href="#">Someone reports second-quarter 2008 earnings &raquo;</a></div></li>
        <li><div><a href="#">Bear scares comedian, everybody laughs &raquo;</a></div></li>
        <li><div><a href="#">Someone Completes Someone else's Acquisition &raquo;</a></div></li>
        <li><div><a href="#">Someone selected by Some Company, S.A.B. de C.V. for ADR program &raquo;</a></div></li>
        <li><div><a href="#">Someone wins landmark multinational asset pooling mandate &raquo;</a></div></li>
        <li><div><a href="#">Someone Announces Internal Restructuring Transactions and Guarantees Related to Acquisition &raquo;</a></div></li>
        <li><div><a href="#">Someone wins comprehensive custodial mandate with one of New Zealand's largest organizations &raquo;</a></div></li>
        <li><div><a href="#">Someone selected by East Timor to provide custodial services and training opportunities &raquo;</a></div></li>
        <li><div><a href="#">Someone launches latest Global Derivatives Collateral offering &raquo;</a></div></li>
        <li><div><a href="#">Someone expands Boston fund services operations &raquo;</a></div></li>
  </ol>
</div> 

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.

More News

And now for the behavior

If the user's browser allows javascript to run, we add some additional unobtrusive behavior (including mousewheel support)

PLAIN TEXT

JavaScript:

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+'">&lt;&lt;</a></li>').append('<li><a class="next" href="'+emptyLinkTarget+'">&gt;&gt;</a></li>');
    /** 
     * and now we initiate 
     **/
    $('.scrollable.js').scrollable({
        size:3,
        horizontal:false,
        duration:1500,
        items:'#items',
        prev:'.prev',
        next:'.next'
    });
}); 

More News

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.

PLAIN TEXT

HTML:

<div class="scrollable js">
    <a href="#" class="more-link">More News</a>
    <ul>
        <li><a class="prev" href="javascript:function(){return}">&lt;&lt;</a></li>
        <li id="itemswrapper">
            <ol style="overflow: hidden; position: relative; visibility: visible; height: 124px;" id="items">
                <div class="__scrollable" style="position: absolute; height: 200000em;">
                    <li><div><a href="#">Someone reports second-quarter 2008 earnings »</a></div></li>
                    <li><div><a href="#">Bear scares comedian, everybody laughs »</a></div></li>
                    <li><div><a href="#">Someone Completes Someone else's Acquisition »</a></div></li>
                    <li><div><a href="#">Someone selected by Some Company, S.A.B. de C.V. for ADR program »</a></div></li>
                    <li><div><a href="#">Someone wins landmark multinational asset pooling mandate »</a></div></li>
                    <li><div><a href="#">Someone Announces Internal Restructuring Transactions and Guarantees Related to Acquisition »</a></div></li>
                    <li><div><a href="#">Someone wins comprehensive custodial mandate with one of New Zealand's largest organizations »</a></div></li>
                    <li><div><a href="#">Someone selected by East Timor to provide custodial services and training opportunities »</a></div></li>
                    <li><div><a href="#">Someone launches latest Global Derivatives Collateral offering »</a></div></li>
                    <li><div><a href="#">Someone expands Boston fund services operations »</a></div></li>
                </div>
                <br clear="all"/>
            </ol>
        </li>
        <li><a class="next" href="javascript:function(){return}">&gt;&gt;</a></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.js here

35 Responses a “(Another) Scrollable Plugin for jQuery”

jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
jtm Says:
November 12th, 2008 at 9:14 pm

Can you extend this to allow adding and removing of navigation items?
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
Johny Says:
January 2nd, 2009 at 5:38 am

this looks great, congrats
nutrition foods Says:
January 29th, 2009 at 7:27 pm

Thanks for the info. May God have mercy on us all.
Barbara J Najera Says:
February 10th, 2009 at 9:09 pm

god bless your blog my friend :)
delorisrhoyle Says:
March 29th, 2009 at 1:48 pm

Thank you for sharing this information.
Fidelity 401k
buyresearchpaper Says:
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
alex80 Says:
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.
marvingot Says:
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.
naterkane Says:
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.
Seb Says:
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!
Seb Says:
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!
???? Says:
February 22nd, 2010 at 12:02 am

[...] (Another) Scrollable Plugin for jQuery [...]
25 Excellent jQuery Tutorials for Navigation Menu « AcrisDesign – Web Design Resources and Inspiration Says:
March 1st, 2010 at 6:44 am

[...] Scrollable Plugin for jQuery [...]
Mohan Says:
May 15th, 2010 at 8:12 am

wow very nice :)
But I just wanted to know can we make it auto scroll ??

Right now it's on manual scroll... so is it possible to make it auto scroll after some time delay ??
37 Amazing Tutorials for jQuery Navigation Menus Says:
July 23rd, 2010 at 4:23 pm

[...] 31-Scrollable Plugin for jQuery [...]
naterkane Says:
September 2nd, 2010 at 6:50 pm

sure, though i don't personally like the idea of any content moving in an interface without there being any deliberate user interaction.

if you make it happen, and let it be a configurable option, send me a patch and i might include it in an update.
Jacob Says:
March 23rd, 2011 at 9:26 am

Very interesting read about a plugin that you have found - Tero Piirainen'S jquery.scrollable.js.On really good and easy to use. And thanks to the author, you wrote about in great detail the installation and use of this plugin. Helped me a lot about your article Scrollable plugin for JQuery.
web design Hertfordshire Says:
June 4th, 2011 at 3:30 am

Nice article.keep it up!
miron Says:
June 9th, 2011 at 8:28 pm

Honestly, I have seen lots of better implementations
25 jQuery Tutorials for Improved Navigation Menus | Submit Links Says:
June 30th, 2011 at 5:31 am

[...] (Another) Scrollable Plugin for jQuery [...]
Nater Kane Says:
July 4th, 2011 at 10:53 pm

it was written in 2008.
15 excellent jQuery of navigation menu plugin Says:
August 16th, 2011 at 3:33 pm

[...] 5. Scrollable [...]
jQuery Tutorials for Improved Navigation Menus | VapvaruN | WP Experts Says:
October 22nd, 2011 at 2:42 am

[...] (Another) Scrollable Plugin for jQuery [...]
15 Great jQuery Navigation Menu Plugins | jQuery4u Says:
October 26th, 2011 at 12:51 am

[...] 5. Scrollable [...]
Pursuit Media Says:
January 18th, 2012 at 12:20 pm

Can you extend this to allow adding and removing of navigation items?