Learning jQuery

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 »

Since the fall of 2007, jQuery developers around the world have been making an annual pilgrimage to Boston, Massachusetts, to meet jQuery team members, JavaScript luminaries, and other jQuery developers at the official jQuery Conference. This spring, in response to growing demand, the jQuery Project is offering its first-ever official jQuery conference on the U.S west coast. The conference will take place April 24–25 in Mountain View, California, and will include top-notch presentations from the jQuery team, as well as other web development and performance experts. Additionally, the conference will be preceded by a one-day intensive jQuery training course in downtown San Francisco, led by appendTo a leading jQuery training and consulting company.

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 »

In this tutorial I’ll show you how to create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I’ve never had a need to build one of these for any of my own projects, quite a few people have asked if I would demonstrate how it might be done, so here goes. Read the rest of this entry »