Learning jQuery

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.

Read the rest of this entry »

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 »

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.

Read the rest of this entry »

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.)

Read the rest of this entry »

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

Read the rest of this entry »

Sometimes it’s nice to be able to give users visual feedback when they hover their mouse over an element on the page. It’s easy to do, of course, with a little CSS:

#hover-demo1 p:hover { background: #ff0; }

That little style rule changes the background of any paragraph that is a descendant of an element with id="hover-demo" to a nice bright yellow — but only when you hover your mouse over it. So, if that’s all there is to it, what does this have to do with jQuery?

Read the rest of this entry »