Intermediate

Working with Events, Part 3: More Event Delegation with jQuery

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 »

Tab Navigation with Smooth Horizontal Sliding Using jQuery

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 »

Quick Tip: Outline Elements on Hover

Someone on the jQuery Google Group yesterday asked about how to display a border around elements on hover. Here is a quick script I wrote to achieve that effect:

Read the rest of this entry »

3 Quick Steps for a Painless Upgrade to jQuery 1.3

Since the release of jQuery 1.3 a month and a half ago, I’ve been keeping my eye on any troubles that people have had with their upgrades. Fortunately, most people have had no problems at all. For those who have, the issues have almost always been in one of three areas. Identifying these areas and adjusting any legacy scripts ahead of time will go a long way toward ensuring a smooth transition to jQuery 1.3.x.

Read the rest of this entry »

43,439 reasons to use append() correctly

The .append() method is perhaps the most misused of all jQuery methods. While an extremely useful and easy method to work with, it dramatically affects the performance of your page. When misused, the .append() method can cripple your JavaScript code’s performance. When used well, it’ll keep your script humming along.

Read the rest of this entry »

Implementing Prototype’s Array Methods in jQuery

One of the biggest concerns I’ve heard mentioned from users of the Prototype library about jQuery is the lack of support for various array methods. The robust features Prototype provides for arrays is of great benefit to developers that do a lot of array manipulation in their JavaScript.

However, I find that after moving to jQuery, I do less array manipulation than I had done with Prototype. Perhaps jQuery has altered my development pattern so I no longer need array manipulation, or perhaps I have shifted most of my data manipulation to the server. Whatever the case, I have only on occasion missed the Prototype array methods.

Read the rest of this entry »