Learning jQuery

Editor’s Note: When I started this blog nearly three years ago, one of the first things I did was write a series on showing and hiding elements on a page. The posts were very basic, as was my knowledge at the time. At best, they demonstrated an incomplete answer to the question of how to selectively reveal content based on user interaction. At worst, they encouraged a solution without any regard to accessibility. That’s why I was thrilled when I saw an article on the Filament Group blog describing their accessible collapsible content widget. They’ve graciously accepted my request to re-post that article here, so without any further ado, here it is…

Collapsible content areas are frequently presented in web sites and applications as a way to let users to control how content is shown or hidden on the page. Also called collapsibles, spin-downs, toggle panels, twisties, and content disclosures, they’re ideal for selectively displaying optional information — like instructional text or additional details, for example — so users can focus on the task at hand and view this content only as needed.

The collapsible content area widget is fairly simple — a couple of HTML elements controlled with minimal CSS and JavaScript — but when we were researching our book, Designing with Progressive Enhancement, we discovered that many common approaches to creating collapsible content fail to incorporate accessibility features. Happily, there is a way to build collapsible content with progressive enhancement so it delivers an optimal accessible experience for sighted and screen reader users alike.

The code example described in this article is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement.

Read the rest of this entry »

Before we begin, please accept my apologies for not posting this tutorial sooner. I know at least two or three people were beginning to wonder if I’d ever finish what I started with this tooltip series. Please also forgive me if the phrase “flip your tip” has a double meaning in some ultra-hip corner of the universe. If it does, I can assure you that I am unaware of it—ignorant and unhip, to be sure, but more important, innocent. Now, on with the show.

Quick Review

In my last three tutorials, I discussed how to put together a very simple tooltip, and I introduced a different feature or concept in each one. In an effort to continue in the spirit of simplicity, I will refrain from repeating the explanations of previous posts and instead simply direct your attention to them before we begin:

• Simple Tooltip for Huge Number of Elements
• Binding Multiple Events to Reduce Redundancy with Event Delegation Tooltips
• Using setTimeout to Delay Showing Event Delegation Tooltips

Read the rest of this entry »

As some of you have heard, there have been two new methods added in jQuery 1.4.2, .delegate() and .undelegate(). These methods achieve the same thing as the .live() and .die() methods, they just use a different syntax. For those new to .live(), it’s a method in jQuery that allows you to attach events to elements that appear in the document as well as elements that will appear in the future. An example would be if you attached a click event via .live():

Read the rest of this entry »

In my Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout().

Read the rest of this entry »

Last time I showed how to use event delegation to create a simple tooltip for a huge number of elements without running into the problem of binding an event handler to all of those elements. In this tutorial, I’m going to refine that tooltip script a bit, avoiding some code repetition and fixing a bug that someone pointed out in a comment.

Read the rest of this entry »

There are many, many jQuery tooltip plugins out there, and some of them are very good. But when someone on the jQuery Google Group asked (a year ago) which plugin could handle displaying tooltips for 2,000 links on a page, I wasn’t able to find one. So, I decided to throw together a quick little plugin myself and was surprised by how easy it was.

Event Delegation, Again

The key to having JavaScript handle hundreds, or even thousands, of elements on a page is to use event delegation. As Louis-Rémi Babé described in Working with Events, Part 3: More Event Delegation with jQuery, jQuery’s .live() method makes event delegation dead easy. A simple tooltip script using .live() might look something like this:

Read the rest of this entry »