• Choose a category
• All
• Classic-Fiction

By Root 1128 0

the zebraHover class to each row as the user hovers the mouse over it. Now we simply need to add a style rule to our CSS file:

chapter_02/30_hover_highlight/zebra.css (excerpt)

tr.zebraHover {

background-color: #FFFACD;

}

Try this out in your browser and you’ll see how great it works. However, it turns out there’s an even simpler way of achieving the same result: jQuery includes a hover action, which combines mouseover and mouseout into a single handler:

chapter_02/31_hover_action/script.js(excerpt)

$('#celebs tbody tr').hover(function() {

$(this).addClass('zebraHover');

}, function() {

$(this).removeClass('zebraHover');

});

Notice something odd about the hover event handler? Instead of one, it requires two functions as parameters: one to handle the mouseover event, and one to handle the mouseout event.

Note: How Many Callbacks?

Some event handlers require a different number of functions. For example, the toggle event handler can accept any number of functions; it will simply cycle through each callback one by one each time it fires.

We’re becoming handy at adding and removing class attributes, so it’s probably a good time to point out another helpful class-related action: toggleClass. You can guess what it does. It’s an incredibly useful action that adds a class if the element doesn’t already have it, and removes it if it does.

For example, say we wanted users to be able to select multiple rows from our table. Clicking once on a table row should highlight it, and clicking again should remove the highlight. This is easy to implement with our new jQuery skills:

chapter_02/32_toggle_class/script.js (excerpt)

$('#celebs tbody tr').click(function() {

$(this).toggleClass('zebraHover');

});

Try clicking on the table rows. Cool, huh?

Spoiler Revealer

The latest news section of the StarTrackr! site provides up-to-the-minute juicy gossip about a range of popular celebrities. The news is a real drawcard on the site—most users return every day to catch the latest update. The client would like to build on the hype it’s generating and add to the excitement, so he’s asked for our help. We’ve suggested a spoiler revealer: the user can try to guess which celebrity the news is about, before clicking to find the answer.

This kind of functionality would also make a great addition to a site containing movie reviews, for example. You could hide any parts of the review that give away details of the movie’s story, but allow users to reveal them if they’ve already seen the film.

To set up our spoiler revealer, we need to add a new element to the news section of the site. Any “secrets” that should be hidden by default will be wrapped in a span element with the class spoiler attached to it:

chapter_02/33_spoiler_revealer/index.html (excerpt)

Who lost their recording contract today?

The Zaxntines!

Let’s break down what our script needs to do: first, we need to hide the answers and add a new element that enables them to be revealed if the user desires. When that element is clicked, we need to disclose the answer. Hiding? Adding? Handling clicks? We know how to do all of that:

chapter_02/33_spoiler_revealer/script.js (excerpt)

$('.spoiler').hide();

$('Tell me!')

.insertBefore('.spoiler');

$('.revealer').click(function() {

$(this).hide();

$(this).next().fadeIn();

});

There’s a lot going on here, some of it new, but if you read through the lines one at a time, you’ll make sense of it. First, we instantly hide all the spoiler elements, and use the insertBefore action to add a new button before each of them. At this point the page will display the new “Tell Me!” buttons, and the original spoiler spans will be hidden.

Next, we select the new buttons we just added and attach click event handlers to them. When one of the buttons is clicked, we remove the new revealer element (which we find with $(this)), and fade in the spoiler element that’s next to it. next is an action we’ve yet to cover. It’s used for traversing the DOM, and unsurprisingly gives