Let's say you want to collect an array of object keys from a JSON object.

Here's how you would have done it in older versions of jQuery (prior to 1.6):

Here's the new way (just a little more convenient):

Going inside the new jQuery.map()

For those that are curious and a little more advanced, there are some neat things going on under the hood of the new jQuery.map() that I would like to talk about.

Adding object support seems pretty trivial at first since jQuery.each() is already doing it - so it must be an easy patch, right? Well, not really. Let's look at how jQuery.each() is doing it. If you look at the jQuery source on github, you'll see that it's doing:

Can you see the flaw in this? It's going to treat the variable object (could be an array or object) like an object if length is undefined. What happens when I have an object with a "length" property? It dies a horrible death. Some have reported this issue.

For the new jQuery.map(), we wanted support for objects and also be able to pass an object with a length property and not have it blow up like jQuery.each() does. Dan Heberden came to the rescue. Dan spent some time making sure that jQuery.map() didn't face the same fate while keeping performance in mind.

Here is what Dan did to see if elems is an array:

I should note that John Resig added:

To support empty node lists.

Let's look at the first part of our isArray variable. You'll notice it does a check for:

We're checking to see if elems is an instanceof jQuery. We're doing this first because you're most likely dealing with a jQuery collection/array-like object. Since jQuery collections are treated like regular arrays (uses for loop), this is an optimized way of checking if we should treat elems like an array. Below is an example of jQuery.fn.map() in action.

Here is jQuery.map() with a jQuery collection passed as the first argument:

If what you passed is not an instance of jQuery but it passed the isArray variable check, it means your call to the jQuery.map() utility function probably looked something like this:

In this case it falls back to this rigorous check to see if it's an array. Note: I'm breaking it down into separate lines so it's easier to understand.

The rest of the logic is pretty straight forward - just some for loops and super fun for-in loops.

Hope you enjoy jQuery.map() with object support!

As some of you may know, the online jQuery documentation went through a major overhaul in January of this year, coinciding with the release of jQuery 1.4. Packt Publishing "open sourced" the jQuery 1.4 Reference Guide that Jonathan Chaffer and I had been writing, allowing us to put its entire contents (and more) on api.jquery.com. Some of you may also know that the raw XML content of the site is available as a single file, which has allowed other sites such as jqapi.com and idocs.brandonaaron.net to provide alternative views of that content. But what most of you probably do not know is that the jQuery API has been available for quite some time as a searchable API that returns the results in JSON format.

Note: The reason you probably don't know about it is that it's half-baked. So, please go easy on it until some smart people have a chance to look under the hood at what I'm doing. Crazy abuse will surely bring it to its knees.

Motivation

I wanted to let people access the jQuery documentation via JavaScript from any other site and pull out exactly what is needed. I also wanted to play around with JSONP. This fits both of those desires.

URL

To access the searchable API, use the following URL:

http://api.jquery.com/jsonp/

Examples

You can tap into the API with one of jQuery's Ajax methods. If you use $.get() or $.getJSON(), you'll need to append "?callback=?" to the URL. With $.get(), you'll also need to set the dataType argument to "jsonp".

Find entries in the API that have "class" in their name and then do something with them:

Find all effects-category entries and then do something with them:

You can, of course, also use the low-level $.ajax() method.

Find entries with a title that ends in "ajax"; append a link for each to the document body:

Search Types

The JSONP API is searchable by name, category, and version. Searching by more than one criterion returns results that match all of the criteria. All searches are case-insensitive.

• Search by name:

  • Key: title
  • Value: the name of any jQuery method, property, or selector
  • Searches in: post title and post slug
  • Substitutions: Before querying the database, all "$" are converted to "jQuery" and each instance of one or more spaces is converted to a hyphen ("-") for both the search values and the the post title and slug.
  • Default: all titles

• Search by category name

  • Key: category
  • Value: category name
  • Substitutions: Before querying the database, each instance of one or more spaces is converted to a hyphen ("-")
  • Searches in: category slug
  • Default: all categories

• Search by version number

  • Key: version
  • Value: a jQuery version number
  • Searches in: category slug for all categories that are a child of the main "version" category
  • Default: all versions

String Matching

The "match" parameter lets you be confine the results to those that match the entire search term, or just the start or end of it.

• Key: match
• Value: one of "start", "end", or "exact" (for search by version number, one of "end" or "exact")
• Default: "anywhere", except for version number, which has a default of "start"

Returned Data

Data is returned as an array of objects. Each item in the array is an object representing a single method, property, or selector. For example, a result with one item would have the following structure:

Note that currently the examples/demos from each entry are not returned.

A (Fairly) Basic Demo

I put together a quick demo to give an idea of the API's flexibility. Type something into the "Name" field in the form below—say, "ajax"—and watch as the results come back. Inside the "Advanced" area, choose the "Matching... End" radio button and search again to see how the results differ.

A Little Less Basic Demo

I replicated this search form on a test server and added back-button support with Ben Alman's crazy delicious BBQ Plugin. Try out the demo.

But wait! There's more!

I put the whole shebang (well, except for the server-side stuff) in a GitHub repo. Clone it, fork it, have your way with it.

But Wait! There's Less!

As I mentioned above, this little project is incomplete. If you peek at the scripts, you'll quickly spot some major chunks of code in need of refactoring. Also, had I but world enough and time, I'd use a nice templating system such as mustache.js or the jQuery Templates plugin to output the search results. But I'll leave all that for another day (or another developer).

Written Articles

• Getting Started with jQuery - this is the official jQuery getting started guide.
• jQuery for JavaScript Programmers - Simon Willison (creator of django) gives you an introduction to jQuery for people who already understand JavaScript.
• jQuery Crash Course - Nathan Smith gives a quick introduction to jQuery on Digital Web Magazine.
• Introduction to jQuery - Rick Strahl, well-known for his work developing with Microsoft technologies, gives his introduction to jQuery with part two covering using jQuery with ASP.NET.

E-Books

• jQuery Fundamentals - open-source e-book written by Rebecca Murphey in collaboration with other well-known members of the jQuery community.
• jQuery Enlightenment - Cody Lindley's e-book covers advanced topics on jQuery with links to working code examples in jsbin.

jQuery Books

• jQuery Cookbook - collaborative book by many jQuery team members with recipes on many jQuery topics.
• Learning jQuery 1.3 - walkthrough of learning the jQuery JavaScript library through hands-on examples and explanations. Authored by Karl Swedberg & Jonathan Chaffer
• jQuery Reference 1.4 - practical examples of the entire jQuery 1.4 API. Authored by Karl Swedberg & Jonathan Chaffer
• jQuery in Action 2nd edition - a fast-paced introduction to jQuery that will take your JavaScript programming to the next level. Authored by Bear Bibeault and Yehuda Katz.
• jQuery UI 1.7 - Build highly interactive web applications with ready-to-use widgets from the jQuery User Interface library. Authored by Dan Wellman.

Slideshows

• John Resig
  Introduction to jQuery
  Things You Might Not Know About jQuery
  Improve Your Web App with jQuery
• Remy Sharp
  (PDF download) jQuery for Designers
  (PDF download) jQuery write a bit more, do lots more
  More talks from Remy
• Marc Grabanski
  jQuery Essentials
• Simon Willison
  jQuery in 15 minutes

Learning Screencasts

• jQuery for Absolute Beginners - Net Tuts screencast series starts by downloading the library and eventually work our way up to creating an AJAX style-switcher.
• jQuery for Designers Screencasts - a myriad of screencast videos to teach you jQuery from a designer's perspective.
• Intro to jQuery - Chris Coyier from CSS Tricks gives you an introduction to jQuery.
  Intro to jQuery Part 2
• Lullbot Introduction to jQuery - this video walks the viewer through the essential concepts and syntaxes needed to start writing simple-yet-powerful JavaScript using jQuery.
• The jQuery Course Prerelease - Marc Grabanski's project to document all he's learned from four years of jQuery programming into one educational course.
• Meet jQuery - this Peepcode Screencast teaches you jQuery through building a simple time-tracking application.
• An Intensive Introduction to jQuery - Ben Nadal takes a deep dive into jQuery.

Attend a training course

• Idea Foundry jQuery Training - The brains behind Collective Idea host jQuery classes led by Karl Swedberg in Holland, Michigan.
• jQuery Boot Camp - Ben Nadal's training course in New York City.
• Thoughtbot Training - look here for training on jQuery from time to time.

Hire a Corporate jQuery Trainer

• appendTo Training - the jQuery company offers corporate training.
• Rebecca Murphey - started the open-source e-book jQuery Fundementals and is a member of the yayQuery podcast.
• Karl Swedberg - wrote the Learning jQuery books and runs this website.
• Marc Grabanski - creator of the jQuery UI Datepicker project and blogger.
• Ordered List - all around great guys, creators of the Harmony CMS, and active speakers and writers.

Conferences

• Carsonified Online jQuery Conference
• Official jQuery Conference - hosted in Boston, San Francisco, and other locations in the future.
• jQuery Summit - online conference.

jQuery Meetups

Another great way to learn more jQuery is to start or join a jQuery Meetup. Check to see if there is a meetup near you, and if not, start one!

Podcasts

• Official jQuery Pocast
• yayQuery video podcast

More Resources

• jQuery on Twitter
• Twitter Directory for Tag jQuery
• jQuery List
• 10 Things I Learned from the jQuery Source

Other Blogs

• Remy Sharp jQuery
• Filament Group
• Nemikor - Scott González
• Ben Alman
• Paul Irish
• Marc Grabanski
• Alex Sexton
• James Padolsey
• Script Junkie
• NCZOnline - Nicholas Zakas
• Perfection Kills - Juriy Zaytsev (kangax)
• Stoyan Stefanov
• Steve Souders
• CSS Tricks
• Web Designer Wall
• Janko At Warp Speed
• Marco Folio

Priced at $199, the two-day conference is one of the best bargains you'll find anywhere for a full-on tech conference. The jQuery team is committed to keeping the price as low as possible, relying on the support of sponsors to help defray the cost of registration. jQuery developers from beginner to advanced will learn a ton, have a great time, and meet many others who are using jQuery in innovative ways to make the web a better place.

On a personal note, this will be the first jQuery conference ever that I won't be able to attend (regrettably, a scheduling conflict is keeping me home this time). But having heard many of the speakers in the past and having been involved a bit in the planning of this conference, I can assure you that you won't want to miss it. While we hope to continue offering a west-coast event on an annual basis, as we have done with the east-coast event a lot will depend on the level of interest and attendance this time around. So, what are you waiting for? Sign up now!

One brief personal plug: I will be teaching a 3-day jQuery class June 2–4 in beautiful Holland, Michigan. If for some reason you can't make it to the conference in April—or even if you can—you might want to consider taking the class. This will be the fourth class I've taught with Idea Foundry, and if it's anything like the others, we'll have a blast, with lots and lots of great learning.

Setting Up

Picking up where we left off last time, I'm going to create the tooltip div, declare a couple variables, and then bind "mouseover," "mousemove," and "mouseout" all at once. In addition to $livetip and tipTitle, I'm declaring showTip (and leaving it undefined for the moment) and delay. The showTip variable will be used as a reference for the setTimeout function, and delay will be used to set the time after which the function within setTimeout's argument will execute (in this case, 300ms).

Of course, you don't have to use a variable for the delay, but I like to have that sort of setting up top where I can find it easily. Also, if I ever decide to convert this script into a plugin, having the delay stored in a variable will make it simpler to convert it to an option.

Setting the Timeout

Inside the .bind(), and after the business of determining whether the event is being triggered by a link or one of its descendants, the setTimeout is called on line 12:

setTimeout is actually a method of the window object; as such, the this keyword inside its function argument will refer to window. It's not of much concern here because, with event delegation, we're relying on event.target rather than this, but I thought it might be worth mentioning anyway.

Note that within the setTimeout function, I'm storing a little data (line 13) for the link to indicate that the tooltip is active on it. This tipActive information then determines what to do on mouseout.

Clearing the Timeout

On mouseout, if the link has the tipActive data, that data is removed (line 29, below), the tooltip is hidden (line 30), and the link's original title attribute value is restored if tipTitle has a value (line 31). If that tipActive data is not associated with the link, then the timeout that was set on mouseover is reset with clearTimeout (line 33).

The mousemove part hasn't changed from what it was in the previous post, except that it first checks if the "tipActive" data is assigned to the link. I figured that setting the top and left properties of the tooltip is probably more work than doing a little check on the link's data, so why bother setting them if I don't have to?

So, that's it. Just add a simple setTimeout delay and conditionally clear it. If you want to set a delay on mouseout, you can do that the same way.

Check out the demo or download the zip (or neither, if you're stubborn).

Flipping the Tip

Next time, I'll show how to flip the tooltip from the right side of the cursor to the left if it would otherwise get cut off by the edge of the browser window.

For review, here is the final version of the script from the last post:

Bind Multiple Events at One Time

As I mentioned last time, this repeats code where it really shouldn't. For example, lines 5, 19, and 24 all check that moused-over element (or one of its ancestors) is a link. One way to reduce the repetition is to bind all three events at the same time (line 4):

This modification relies on the type property of the event object, checking it to see which of the three event types were triggered and acting accordingly. That way, I can get away with writing the $link and link declarations and the link check one time instead of two or three.

Other changes

Here are a few other changes worth mentioning:

• Line 1 declares the $livetip variable while at the same time creating the tooltip div and appending it to the body. Now the script can refer to that variable rather than having to call $('#livetip') each time it is shown, moved, hidden, and so on.
• Rather than wrap nearly everything in an if block, I made the function return if there is no link selected. Some people have a philosophical problem with multiple return points in a function, and it can make it hard to decipher and debug code sometimes, but here I think it's okay.
• On "mouseout" (lines 23-28), the script is resetting link.title to tipTitle only if tipTitle has a value. This, I'm hoping, fixes the problem reported by Moritz Peters of the tooltip not displaying correctly if you first mouse over a link before the document is ready.

Try the demo or download the zip (or both).

Adding a Delay

Tomorrow—for realz this time—I'll show how to add a short delay on mouseover before showing the tooltip.

P.S. You see the "$" in "$liveTip" and "$link"? There is nothing special about that—no special meaning given to "$" in JavaScript. It's just a convention that some jQuery folks have adopted to remind ourselves that the variable is holding a jQuery object.

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:

This script does the following:

• Creates a single tooltip element that will be shown and hidden as the user mouses over links (line 1)
• Hides the tooltip and appends it to the body (line 1)
• Changes the tooltip's contents according to the moused-over link's title and href attributes (lines 7 and 14)
• Places the tooltip on the page 12px below and to the right of the cursor position at the time that it entered the link (lines 9–13)
• Shows the tooltip (line 15)
• Sets the link's title attribute to an empty string when the user mouses over the link; this prevents the browser's default tooltip from appearing (line 8)
• Sets the link's title back to what it was originally and hides the tooltip when the user mouses out of the link (lines 16–19)

A Little Style

At minimum, the tooltip needs to have the position: absolute style declaration for it to be positioned correctly on the page, but I threw in a little extra CSS to make it look more appealing:

Typically I like to include live demos directly in the blog entry, but since this one involves 2,000 links, I've set up separate demo pages. Check out the tooltip demo using .live(), or download the zip.

A Little Less Simple, A Little More Speedy

Using .live() in this way avoids binding event handlers directly to the thousands of links on the page. However, it doesn't prevent jQuery from searching the entire document for all of those links. After all, I'm still using the $('a') jQuery function. Also, at least for now, .live() binds events to document, forcing event bubbling all the way up the DOM each time. If there is a noticeable performance lag when the script is initially executed, it may help to use custom event delegation.

Using custom event delegation, I bind the events to a containing table element:

With this approach, I needed to first make sure I was dealing with a link before I tried to do anything with it. Line 5 uses the .closest() method to select the <a> that is either the event.target or one of its ancestors. Line 6 checks the length property to see if any elements are included in the variable declared in line 5.

Note the use of .bind() instead of .live() and event.target instead of this. I could have used the .mouseover() and .mouseout() shortcut methods, but since I used .live() in the first example, it was easier to simply replace "live" with "bind." Also, you may be wondering why I used mouseover / mouseout when I could have used mouseenter / mouseleave or even the .hover() method (which uses mouseenter and mouseleave internally). The reason is that mouseenter and mouseleave prevent the event bubbling that this script relies on for its event delegation. Those two events would be triggered only when the mouse enters or leaves the full table, while mouseover and mouseout are triggered whenever the mouse enters or leaves any of the table's descendant elements, as well.

View the demo using custom event delegation, or download the zip.

One more Enhancement

Some people like having the tooltip move along with the cursor, as long as the mouse is over the element. Sometimes it's nice to be able move the tooltip a little if it initially overlaps something important. Adding the basic functionality is pretty straightforward. Just bind the mousemove event to the same table element:

With the addition of lines 25 through 32, as the mouse moves over the links, the tooltip's top and left style properties are continually updated based on the mouse's position.

Try the demo and watch the tooltip move along with the mouse position, or download the zip.

The Plugin

The plugin doesn't offer much more than the scripts in this post, but feel free to try it out. One difference is that it doesn't rely on the .closest() method, so it can be used with jQuery 1.2.6 if you're stuck with that version for some reason. The syntax is a little funky:

The containerElement selector provides context so you can specify where exactly the event handlers are bound (unlike .live(), which binds to the document). The first argument of .eztip() is required. It should be a selector that matches the elements for which you wish to show a tooltip. The second argument is the typical options object, allowing for a handful of objects that you might expect to find in a stripped down tooltip plugin.

Let's Make Better Mistakes Tomorrow

The tooltip scripts in this post work fine, but they repeat code where they really shouldn't. Stay tuned tomorrow for a brief tutorial on one way to avoid such code repetition.

From traditional event listening to event delegation

Since an event occurring on an element is propagated to all of its ancestors, an event listener can be bound to a single ancestor of numerous elements instead of being bound to all the elements individually.

Consider the following list items:

If we want to display the class of an item when it is clicked, a traditional event listener in jQuery would be written like this:

The event object passed to the handler has a target property which corresponds to the element that has been clicked.

The equivalent using event delegation would look like this:

Event delegation has two main advantages:

1. setting a single event listener instead of multiple ones is obviously faster;
2. any new element later added to the list will have the same behavior (as demonstrated in Working with Events, Part 1).

This translation to event delegation that we've just made is, however, slightly too simple, since our original aim was to display only the class of the list items. Using the previous snippet, the class of the unordered list itself can be displayed (by clicking to the left of a bullet-point). We thus have to make sure that the target of the click is a <li>.

Scanning the ancestors of the event.target: the .closest() method

With such a simple document, event delegation is really that easy to achieve. But things can get more complex if the items have children elements:

In this case, if the user clicks on one of the words item, the event.target will be a <u>. It is therefore necessary to loop through all of the ancestors of this original target to find the element that is "interesting" for us: the <li>

Notice that if the user clicks outside of an <li>, we have to stop looping through the ancestors at some point; in this case when we find the root of the document (which has no parentNode).

jQuery 1.3 introduced the .closest() method, which replaces this loop by a single line of code:

The parameter passed to the .closest() method is a CSS selector that will match the first interesting ancestor.

The context parameter

It can be noted that, when the click occurs outside of an <li>, we could stop looping through the ancestors before hitting the document root, but instead as soon as we hit the <ul>. jQuery 1.4 will introduce an optional context parameter to .closest() for this purpose:

Here this is the <ul> element to which the event listener has been bound. This optional parameter improves the performance of event delegation as it prevents the wasted resources of searching for an ancestor which cannot exist.

Event delegation in a single line: the .live() method

jQuery 1.3 also introduces .live(), a method which binds the event listener and implicitly calls the .closest() method to determine whether your event handler should be executed or not.

Note how different the syntax using the .live() method is. It seems that we have switched back to a traditional event binding. However, a big difference is that the event listener will work for any existing and future element matching our original selector. There is, of course, nothing magic: behind the scenes .live() simply binds the event listener to the document root and filters any event.target using the .closest() method.

A notable difference with the traditional event binding syntax is that we are not using the target property of the event object inside our event handler, but rather the currentTarget. Indeed, the target of the event is possibly a child of one <li>, whereas the currentTarget property refers to the element that has been found by the implicit .closest().

As explained on the Event Object documentation, the currentTarget property is supposed to be the current DOM element within the event bubbling phase, i.e. the element on which the event has been detected by the event listener, which will always be the element on which the event listener was bound. When using .live(), the currentTarget would therefore always be the document root and you would need to use .closest() once again on the original target to find an interesting ancestor.

This kind of code is required with jQuery 1.3, but as of jQuery 1.4, the currentTarget is modified internally and can thus be used to avoid the extra .closest() inside the event handler.

The context parameter

In jQuery 1.3 all live event listeners were effectively bound to the document root. This can hurt the performance of a web page since all events detected by an event listener will trigger the execution of an implicit .closest(), even though the event target might be totally out of interest.

In jQuery 1.4, .live() should be able to bind the event listener to a specific and more focused element of the document by taking advantage of the context of your jQuery object:

The context is the second parameter used to build our jQuery object. To be useful for .live() it has to be set as a pure DOM element, hence the [0] after $("ul"). Brandon Aaron has a useful article explaining the context parameter in detail.

Unbind for .live(): the .die() method

Just like .bind() has its .unbind() counterpart that allows for event listeners to be unbound, .live() has its .die() counterpart.

Unlike .bind(), .live() does not allow for namespaced events to be used.

Dealing with events that don't bubble

There are some events for which event delegation is traditionally not possible, simply because they do not bubble. The promise of jQuery 1.4 is nevertheless to make those events compatible with .live(). How this is achieved will be covered in the upcoming fourth part of this tutorial.

The Styles

For the navigation items, I used a simple unordered list wrapped in a <div class="nav">. While the HTML structure is straightforward, the CSS is a little tricky, so I'll detail it here:

Most of the relevant CSS here has to do with positioning the nav items. I set the top <ul>'s left margin to 75 pixels less than the wrapper's width so that the top-level links appear on the right side. The 1600px width for the <ul> gives the floated list items ample room to line up horizontally next to each other.

The wrapper's overflow declaration is significant, as it hides the list items when they're sticking out to the right, but the rest is "window dressing."

Sliding the Nav

With the nav looking the way I want it at its initial state, it's time to make it do something. I'll start with a simple setup, having each "tab" (top-level item) slide to the left on the first click to reveal its sub-nav items, and slide back to its initial position when it's clicked a second time.

For this basic behavior, everything can be done inside a click handler for the top-level links. Note: Since I'm using multiple navs for this tutorial, each with its own set of behavior, I'll be referring to them by ID, unlike in the CSS snippet above, where everything is styled by class. There is nothing special about the selectors or their naming here. Name your own elements and select them however you want.

The first thing to do is set a few variables. The $parentItem variable is the <li> parent of the clicked link. The slideAmt is the width of the nested <ul>, which is the next sibling of the link. And direction will eventually determine whether the parent <li> should be slid to the left or to the right.

Notice the use of $(this). Inside the click handler, this refers to the clicked DOM element. By wrapping this in $(), we can call jQuery methods on it.

To get the sliding motion to occur, we can animate either the left property or the marginLeft property. Here, I'll animate marginLeft. So, the next thing to do is determine the direction of the animation based on the current value of marginLeft: If it's less than 0, direction is set to "+=", which increases it (back to 0); otherwise, direction is set to "-=". At the same time, an "expanded" class will be toggled so that the arrow background image can change directions.

Finally, we do the animation, plugging in the direction and slideAmt variables. The return false; line stops the default click action from occurring. Here is the finished code for the basic implementation:

Give it a try:

One at a Time

That's all well and good, but I don't really care for having more than one row of items expanded at a time. A couple simple modifications will fix that for us:

The links are stored in a variable first thing here. Whenever a link is clicked, all links have the "expanded" class removed. Of course, only one, at most, will have that class, but I'm lazy and it's easier to tell all of the links to remove the class than it is to hunt links that have the class first.

The same check is performed to set the direction of the animation. If the clicked link's parent <li> is going to be slid to the left, the link will also get the "expanded" class.

Finally, the clicked link's parent is animated in the direction and number of pixels specified by the variables. But here's the twist: all of that parent's siblings have their marginLeft property animated to 0. Again, I'm taking the lazy route, animating all of the siblings, even though one or none of them will need it.

Here's a demo of the "one at a time" version:

Auto-Collapse

Now that the expanding and collapsing are happening the way I like it, I'll add one more little touch. If the user's mouse leaves the containing <div class="tab-nav">, and stays out for a full second, any expanded list will collapse.

Line 2 declares a variable that will be used for the setTimeout(), which you can see tucked inside the .mouseleave() method near the bottom of the code. The setTimeout() function has two arguments: the first is an anonymous function that contains code for triggering the collapse of the list items, and the second is the number of milliseconds to wait (1,000 milliseconds) before the first argument (the anonymous function) is executed. The clearTimeout() inside the .mouseenter() method does what its name suggests: it clears the timeout. If the user mouses out of the nav area but then mouses back in before the 1000 milliseconds are up, the timer is stopped and the function will not be executed.

Note: The mouseenter(fn) and mouseleave(fn) shorthand methods are available as of jQuery 1.3. If you're still using jQuery 1.2.6, you can use .bind('mouseenter', fn) and .bind('mouseleave', fn) instead. Or, with just about any version of jQuery, you can use .hover(fn, fn).

Here is the final demo:

There are many ways to do this sort of thing. Just tweak the CSS or change the animation for a completely different experience.

Setting up Your Files for jQuery IntelliSense

First, set up jQuery on your page by downloading the latest version from the jQuery site.

Next, you will need to download the jQuery Documentation file from the jQuery site.

Download the files and add them to your project.

IntelliSense in external JavaScript files

At the top of the JavaScript file in which you would like to have jQuery IntelliSense enabled, you will need to add a line to reference the documentation file:

/// <reference path="jquery-1.3.2-vsdoc2.js" />

IntelliSense inline on your ASPX page

There are a couple of scenarios that may affect if you include a reference to the VSDOC file or not. If in doubt, just add a reference to the documentation file.

If you are linking to jQuery by the Google Code AJAX Library or are linking to jQuery from anywhere outside of your project you will need to reference the documentation file.

From each ASPX page you want jQuery IntelliSense you’ll want to call the reference within a server-side conditional statement so that the documentation file will still load in Visual Studio but will not load at run-time. Add the following after your jQuery declaration:

If you downloaded jQuery and saved it to your project Visual Studio will look for the vsdoc.js file automatically if the following conditions are met.

You've downloaded and installed the hotfix for Visual Studio.

jQuery and the documentation file need to be named the same with the exception that the documentation file end with -vsdoc.js. So when you add jQuery to your project make sure to rename them similarly. For instance, jquery-1.3.2.js is your jQuery library, Visual Studio will look for the documentation file at jquery-1.3.2-vsdoc.js and load it.

(Note: the jQuery 1.3.2 documentation file is named jquery-1.3.2-vsdoc2.js on the Download page so make sure you take out the 2 so that the file will be found by Visual Studio)

If you can't meet these conditions you'll need to reference the documentation file as shown above.

To test to make sure the documentation file loaded correctly, you can type $( and you should be presented with some documentation.

Additionally, you can type in $(document).r and you will be presented with a drop down of available options to choose from, one being "ready."

Now as you write your jQuery code, you'll be helped along by seeing what methods and properties are available to you.

Related Links

• Rich IntelliSense for jQuery
• jQuery and Microsoft
• jQuery, Microsoft and Nokia
• VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files