Learning jQuery

I just got back from the jQuery conference in San Francisco. Wow, what an event. In addition to some incredible talks, I had the opportunity to speak with Rey Bango, Johnathon Sharp, and, of course, John Resig. Any conference where you get to talk to some of the most influential people in jQuery is a win in my book. The “High Performance JQuery” presentation especially caught my attention when the speaker, Robert Duffy, said that .hide() and .show() were slower than changing the css directly. Not having occasion to ask him why, I benchmarked the various ways to hide DOM elements and looked into the jQuery source to find out what is going on.

The HTML I tested against was a page of 100 div tags with a class and some content, I cached the selector $('div') to use with each method to exclude the time needed to find all the div elements on the page from the test. I used jQuery 1.4.2 for the testing, but keep in mind that the algorithms behind the method calls can change dramatically from version to version. What is true for 1.4.2 is not necessarily true for other versions of the library.

The methods I tested were .toggle(), .show() & .hide(), .css({'display':'none'}) & .css({'display':'block'}), and .addClass('hide') & .removeClass('hide'). I also tested modifying an attribute of a <style> element.

Read the rest of this entry »

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 »

When working with an Ajax-enhanced website, it’s generally a good idea to provide a regular request fallback for any core functionality of the site. When you work to ensure that a fallback is in place, you will be faced with determining when a particular request is an Ajax request or just a normal page request. In most situations, it’s considered a best practice to build your site without Ajax first, adding the Ajax functionality afterward so the fallbacks are in place from the beginning.

Fortunately, jQuery makes it super easy to differentiate the Ajax requests from normal page views.

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 »