Learning jQuery

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.

(more...)

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.

Here is what the code looks like with the minor change:
(more...)

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:
(more...)

It's been so long since I last posted a tutorial here that I'm afraid everyone might have forgotten about the place. For the past few months, there has been a little "Page Contents" menu at the top-right corner of some of the pages on this site — actually, any page that has more than one <h2> elements in the main content area. In this entry, I'd like to demonstrate how to create an automatic page contents list using jQuery.
(more...)

There was a request recently on the jQuery discussion list for an enhancement to Ritesh Agrawal's Simple Star Rating System to allow for 1/2 star ratings. So I took it upon myself to add the feature.

Keep in mind that this plugin does not "degrade" when the browser doesn't have JavaScript or when JavaScript is disabled. The the elements for the stars are created by the jQuery code, so when JavaScript isn't available, the elements don't appear. Therefore, if you are not absolutely certain that visitors to your site will have JavaScript available, this plugin probably isn't the best solution for you. (See Wil Stuckey's jQuery Star Rating Plugin for a degradable option.)

My addition to the plugin is pretty simple. It just adds another option to the settings, called increment, so you can do something like this now: $('#rate1').rating('example.php', {maxvalue: 5, increment: .5});. If no increment value is set, or if it's greater than or equal to .75, the plugin will use whole-star increments. If the value is less than .75, it'll use half-star increments. Here you can see it in action:

I also updated Ritesh's demo page to include the new example: Simple (Half) Star Rating System. If you like it, you can download the files from there.

A few weeks ago I wrote about two ways we can achieve the "accordion menu" effect, and I promised to describe a third option. Well, this is it, Option 3. But first, here is a list of my other show-hide-toggle entries, as well as Jörn Zaefferer's accordion menu plug-in:

• More Showing, More Hiding
• Slicker Show and Hide
• Basic Show and Hide
• Accordion Menu Plugin

(more...)