We eventually settled on a combination of jQuery Tools’ Tab and Scrollable libraries, so we’ll use those as examples in this article. At the time of writing jQuery Tools was at version 1.2.5.
- Scope of work
- Verify that the functionality works as advertised
- Reduce and enhance
- Add the functionality to your site
Scope of work
As the jQuery Tools demos don’t specify the CSS media type, we test with a normal PC browser, which ultimately means that we’re testing with the ‘screen’ media type.
It is important to test the functionality on all devices that you intend to support, such as mobile phones, printers and screen readers. At a basic level this means testing multiple media types at every stage of the process.
For the sake of simplicity, this article assumes that only the ‘screen’ media type will be supported, for browsers on a PC.
Verify that the functionality works as advertised
The first step is to verify that the functionality actually works, by creating a bare bones stand-alone test page void of anything other than the most basic setup. If the library offers a demo, use it, with the most minimal setup provided.
Test the functionality on all browsers you will be supporting. If any browser bugs materialise, see if they can be fixed easily. Only use the library if this basic test page can be made to work sufficiently.
Accordion (via the Tab library)
- jQuery demo page: Making Accordions with the Tabs
- jQuery standalone example: jQuery Tools standalone demo – accordion
- Our initial accordion test page: accordion.tgz
Note that here the only modification we’ve made is to remove the forward slash from the image URLs in tabs-accordion.css, so that we can test the functionality without having to route the request through a web server.
- jQuery demo page: Minimal setup for scrollable
- jQuery standalone example: jQuery Tools standalone demo – scrollable
- Our initial scrollable test page: scrollable.tgz
Note here that we’ve used the minimal CSS provided on the demo page and that we’ve replaced the Flickr images with text so that we can test without relying on Flickr. By using the minimal CSS we also needed to give the prev/next anchors some text and reduce the width of .scrollable so only a single item’s content is shown (which revealed that a set width is required for items).
Reduce and enhance
The accordion example is fine in (X)HTML – it just shows all content as normal.
You may also want to make other tweaks to the CSS so that everything works nicely with any surrounding content that will be on the page.
This is probably overkill, because most environments will support CSS as there are few benefits of disabling them. Even so, to be thorough we will deal with this situation as well.
Both the accordion and the scrollable examples require CSS to function correctly.
For the accordion, we only load the functionality if #accordian has its border-style set to solid.
For scrollable, we only load the functionality if .scrollable .items has its position set to absolute.
Add the functionality to your site
- Our final accordion, with progressive enhancement: accordion-progressive_enhancement.tgz
- Our final scrollable, with progressive enhancement: scrollable-progressive_enhancement.tgz
Posted by Stephan on 01/04/2011.