JQuery_ Novice to Ninja - Earle Castledine [35]
Custom Scroll Bars
The client strolls over to your desk with a furrowed brow, holding a copy of the “absolutely final” signed-off designs in his hand. “Now,” he starts, “these scroll bars here won’t look like this, will they? I mean, they’re all gray, and stand out badly.”
Usually you only have to be working as a web developer for a very short time before a client asks you to replace the standard operating system scroll bars with custom ones—especially for internal elements, like scrolling divs. It does seem like a reasonable request, but it has some usability implications of which you should be aware.
People have certain expectations about how core interface components of their operating system will function, and custom implementations can sometimes have different features from the core elements that they are replacing. Breaking users’ expectations in this way can be extremely frustrating, so this type of UI customization should be undertaken with extreme care.
That said, there are times when a well-placed custom UI element can make a world of difference to the overall feel of an interface. Ultimately, you will have to weigh the benefits and drawbacks for your intended audience. In our case, the client is paying—so we’ll do it!
There’s no need, however, to try and build it from scratch: a scroll bar is a complex user interface element, and the client would be unhappy if he found out we’d wasted precious development hours building it ourselves, especially when there’s a perfectly suitable plugin ready to go: it’s called jScrollPane.
jScrollPane is a jQuery plugin that allows you to replace the browser’s default vertical scroll bars with custom ones in any element with overflowed content. You can find the plugin in the official repository, but a more up-to-date version is available on Google Code.
There are two files we need to include: the JavaScript code file, jScrollPane-1.2.3.min.js; and the accompanying CSS file, jScrollPane.css. The CSS file sets out some default styles for the scroll bars, and gives you a starting point for implementing your own customizations. Simply extend or overwrite the styles contained in this file with your own colors and images to create your customized scroll bars. We’ll stick with the default style for our example: a sleek-looking gray bar that will fit in on just about any site (as illustrated in Figure 3.6).
Figure 3.6. A custom scroll bar
You can activate custom scroll bars on any element by simply calling the jScrollPane function on it. Although parameters are optional, there are more than a dozen for you to tweak, such as showing scroll bar arrows, or moving the scroll bars to the left-hand side of the panel. You can see the full list on the plugin’s home page. For our example, we’ll set a margin between our content and the scroll bar, set the width of the scroll bar, and choose to hide the top and bottom arrows:
chapter_03/16_custom_scrollbar/script.js (excerpt)
$('#fine_print').jScrollPane({
scrollbarWidth: 10,
scrollbarMargin: 10,
showArrows: false
});
Our new scroll bar looks and works great, but you might notice that it fails to respond when you scroll the mouse wheel over the element. jQuery’s core library has deliberately left out mouse wheel functionality to keep the library’s size to a minimum, but there’s a plugin to add it back in, and jScrollPane has been written with this plugin in mind. As a result, all you need to do is include the mouse wheel plugin in your page and jScrollPane will automatically add mouse wheel event handling to all your scrolling content panes, letting you scroll them however you please!
Resizing
Resizing has a few different meanings in relation to a user interface: