Aaron Winborn

I've set up a sliding show schedule header for Air America, although unfortunately, you can't preview it yet. (That'll launch in April). I found a good use for the hoverIntent module there: when you scroll over a show icon, the upcoming show information will be displayed below. Usually, you would just use jQuery's .mouseOver event for that. However, using hoverIntent, it slows down the reaction, so if you zip your mouse past an icon, it won't automatically set the text: you'll instead need to intentionally point your mouse at it for half a second. I believe this makes the animation much smoother.

Views Slideshow uses that module if it's enabled as well. Note that hoverIntent requires jQ and (if you're using Drupal 5) jQuery Update.

Here's the snippet I used:

That's called in the document ready function, of course, and calls the following jQuery:

Using the Zen theme, each show slot has a CSS ID of #node-[nid], such as #node-56323. Additionally, the view of the upcoming text, which is displayed below the show icons, each has an id of #aar-shows-schedule-upcoming-[nid], corresponding to that node. Thus, all the upcoming text slots are hidden, then just the one associated with that show is displayed.

Using a $hover variable allows us to set the hover function to 'hoverIntent' if that module is included, but deprecates to 'hover' if we've turned off the module, so that our site doesn't break, and works in a similar fashion.

Watch for it in April!

Aaron