nater kane & friends » blog » 2008

Archive for October, 2008

(Another) Scrollable Plugin for jQuery

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

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)