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().
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.
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.
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:
Event delegation, as described in the first article of this series, is a way to take advantage
of event bubbling to avoid binding an event listener more than once. jQuery 1.3 and the upcoming jQuery 1.4
have many features that make using event delegation in your web pages easier.
The aim of this tutorial is to help you understand how these new features work. 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 »
In September 2008, at the jQuery Conference, it was announced that Microsoft would be shipping its upcoming releases of Visual Studio with jQuery built in. They would not fork or change the jQuery code but ship it as is. Microsoft also announced that they would distribute IntelliSense-annotated documentation JavaScript files for Visual Studio 2008 that developers can reference in their files to enable IntelliSense for jQuery. The following instructions will help you get started using this tool to make writing jQuery scripts faster than ever.
© Copyright 2006–2010 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License.
Development by Karl Swedberg. Design by Rex Rainey. Published with WordPress.
