A common strategy for dealing with pages that have a lot of content is to hide some of the content until the site visitor wants or needs it. There are many approaches to this — you could use tabs, accordions, lightboxes, or the focus of this chapter, scrollable areas.
Scrollable areas are easy for site visitors to understand and use, but they often get ignored because some operating systems have unsightly scrollbars that ruin the aesthetics of your carefully-tuned design. Browsers offer few, if any, options for customizing the appearance of scrollbars, and no official means of doing so has ever been included in any HTML or CSS specification.
Some designers have turned to Flash to create custom scrollbars, and I'm sure you've come across samples of these Flash scrollbars online more often than not, they're unwieldy and break common conventions for dealing with scrollable areas. For example, you're rarely able to use your mouse's scrollwheel to scroll through a Flash scrollable area.
In this chapter, we'll learn:
- How to download and use jQuery plugins to do even more with jQuery
- How to use a plugin's built-in customization options to customize how a plugin works
- How to use CSS to customize a plugin even further
- How to set up custom-designed scrollbars that work just as your site visitors expect
- How to use the jScrollPane plugin to smoothly scroll between different bits of content in our scrollable area
We've already talked about how programmers solve the same problems over and over again. It's these common tasks that jQuery simplifies so that we can accomplish these tasks with a minimum amount of code. But what about the tasks that are only somewhat common, like the desire for beautiful custom scrollbars that work?
That's where the jQuery community becomes important. Developers in the jQuery community are able to write code that extends the functionality of jQuery to simplify tasks that are only somewhat common. These bits of code are called Plugins and they are used in conjunction with the jQuery library to make coding complex interactions, widgets, and effects as simple as using the features already built into jQuery.
You'll find a library of hundreds of jQuery plugins on the official jQuery site. In addition to those, there are literally thousands more available from sites across the Web for just about any task you want to accomplish.
To create custom scrollbars, we'll be using Kelvin Luck's jScrollPane plugin. You'll learn how to install the plugin on your page and how to configure the CSS and options to make your scrollbars look and work the way you want.
Recently, the jQuery team has started supporting a small number of official jQuery plugins, and you can use those confidently, knowing that they have the same level of expertise, documentation, and support behind them that jQuery itself has. All other jQuery plugins are provided by various members of the jQuery community, and those authors are solely responsible for documentation and support for their own plugins. Writing and providing jQuery plugins is a bit of a free-for-all, and sadly you will come across a fair number of jQuery plugins which are poorly documented, poorly supported, and even worse, poorly written. What kinds of things should you, as a newcomer to jQuery, look for when choosing a plugin?
- A recent update to the plugin. Frequent updates mean that a plugin is well-supported and that the author is keeping the plugin up to date as jQuery and browsers evolve.
- Thorough and easy-to-understand documentation. Before attempting to download and use a plugin, take a look through the plugin's documentation and make sure you understand how to implement the plugin and how to use any options the plugin makes available to you.
- Browser support. Great plugins generally have the same browser support as the jQuery library itself.
- Working demo. Most plugin authors will offer one or more working demos of their plugin in action. Check out the demo(s) in as many different browsers as possible to be sure the plugin works as advertised.
- Reviews and ratings. You won't find reviews and ratings for all plugins, but if you can find some, they can be helpful indicators of the quality and reliability of the plugin.