Intermediate

What is this?

One of the most confusing aspects of jQuery is how it assigns scope during callbacks. It must be confusing because the topic generates a lot of questions on the mailing list. It’s too bad, really, because jQuery sets the scope in order to simplify your code, not make it more confusing.

So here are some pointers that may help you remember what this is.

Read the rest of this entry »

Clearing Form Data

A question I often hear is, “How do I clear a form?”

Initially the answer seems very straightforward – a one-liner in jQuery:

$('form :input').val("");

But upon closer examination we find that this is a bad way to solve the problem. When someone says they want to “clear a form” what they really mean is that they want to clear the visible state from all the form fields. With this in mind, the code above is clearly not the right way to get the job done. First, it will blast away the values of hidden inputs, checkboxes and radio buttons. Not good. The values of those fields should not be altered. And second, it does not properly account for select elements. What we need is something smarter. Here’s a start:

Read the rest of this entry »

Book Excerpt – Table Manipulation

Packt Publishing has just posted an excerpt of our new book Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques on their site. The excerpt covers table sorting, pagination, row highlighting/striping, and basic tooltips. It also gives a hat tip to Roger Johansson of 456 Berea Street and Christian Bach of jQuery Table Sorter fame (by the way, Christian has just released version 2.0 of the plugin, and it’s awesome!). Here is the summary:
Read the rest of this entry »

Animated Scrolling with jQuery 1.2

A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I’ve successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone.

Update

This entry is deprecated. Please see the following for more current information:

Read the rest of this entry »

Namespace Your Events

A common pattern in jQuery plugin development is the need to undo what the plugin has done. This is usually handled through a method prefixed with “un”. Another common pattern is the use of anonymous functions for event handlers. Unbinding events is easy with jQuery but unbinding a single event handler requires the use of a named function. jQuery 1.2 now provides another option for binding and unbinding events: event namespaces.

Read the rest of this entry »

Improved Animated Scrolling Script for Same-Page Links

After posting the last entry on animated scrolling with jQuery 1.2, I realized that I had left out an important piece of code. Actually, I didn't discover it until someone notified me that another page on the site was broken. Can you spot the problem(s)? [Note: the problem is not in line 3. The syntax highlighter just can't handle the regular expression with two slashes in it ("//") and is incorrectly treating them as a comment mark.] See the answer below the code.

JavaScript:
  1. $(document).ready(function(){
  2.   $('a[href*=#]').click(function() {
  3.     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  4.     && location.hostname == this.hostname) {
  5.       var $target = $(this.hash);
  6.       $target = $target.length && $target
  7.       || $('[name=' + this.hash.slice(1) +']');
  8.       if ($target.length) {
  9.         var targetOffset = $target.offset().top;
  10.         $('html,body')
  11.         .animate({scrollTop: targetOffset}, 1000);
  12.        return false;
  13.       }
  14.     }
  15.   });
  16. });

Read the rest of this entry »