JQuery_ Novice to Ninja - Earle Castledine [57]
Note: Naming the Event Parameter
You certainly don’t have to call the event object e—it’s just a parameter name, so you can call it whatever you want. The aliases e or evnt are fairly standard. People tend to shy away from using event, as various browsers respond to event as a keyword, so it’s best to play it safe and avoid errors.
Anyway, back to the code! The mouseover event fires whenever the user moves their mouse over the navigation item. We catch the e parameter in our event handler and pass it on to gallery.direction. As we’ve seen, this contains some specific information about the event, such as where it occurred. We use this information to calculate the mouse’s horizontal position on the gallery widget:
chapter_04/15_iphoto_style_slideshow/script.js (excerpt)
var x = e.pageX - which.offset().left;
This gives us a number in pixels. We then compare this value to half of the gallery’s width. If the number is smaller, we’re on the left side; otherwise, we’re on the right. This allows us to determine which direction to scroll:
chapter_04/15_iphoto_style_slideshow/script.js (excerpt)
gallery.scroll = (x >= gallery.width / 2) ? ">" : "<";
pageX is just one of the many available properties of the event object. We’ll be seeing a few more in the next chapter, and there’s a full list in the section called “Events” in Appendix A.
Image-ine That!
Milestone time! The widget object we’ve created, using named variables and functions, is the weapon of choice of a true jQuery ninja! It makes your code readable, concise, and, most importantly, reusable. You’ve also mastered timers and event objects, which could be equated to flash-bombs and throwing stars, were one feeling particularly metaphorical. There’ll be no holding you back soon.
The StarTrackr! site is definitely looking more alive, now that we’ve added slideshows, lightboxes, and some classy cross-fades. Our client (and his investors) are ecstatic, and he has another series of changes he’d like to see on the site as soon as possible. That’s more work for us, which means more jQuery goodness is on the way!
Chapter 5
Menus, Tabs, Tooltips, and Panels
jQuery is certainly a master of the DOM—effortlessly moving things around, animating CSS properties, and manipulating element attributes to help us spice up our static content. But static content is a shrinking part of the Web; more and more fully featured, highly functional, and impressive looking applications are sprouting up every day. This chapter sees us move away from static documents, and into the world of bells and whistles for Rich Internet Applications (RIA).
Our client, specifically the owner-operator of the recently popular StarTrackr! celebrity geotagging and stalking web site, has been reading some business magazines; he’s learned the term RIA, and is determined to use it as much as possible. He’d like to see his site move away from simple brochureware and become an online application where users can easily and enjoyably hunt their favorite stars. Which, of course, means we can move onto some really fun stuff.
This chapter is all about the user interface: we’ll look at grouping content logically and providing the user with easy access through drop-down menus, tabbed interfaces, sliding panels, tooltips, and accordion controls. With these tools under your belt, you’ll be ready to organize even the most complex interface into discrete chunks that are easy and fun to play around with!
Menus
We’ve tinkered with a few menus already, but they’ve mostly been simple, top-level navigation panes. In this section we will have a look at applying jQuery to more intricate menu-style navigation controls: collapsible and drop-down menus.
As the StarTrackr! site grows larger (and our client’s