The Tools - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 22

Now we need to add our code into 03.js . Going into more detail about the code, the steps it will follow are
as follows:

hover event for each <code> tag: one for when the mouse enters the hover
state, and one for when it exits the hover.

• Bind two functions to the

<code> element using jQuery's .text() method; use a simple regular
expression to remove any characters that are not alphanumeric (to remove the opening and closing
brackets); and cast the matched string as a String to prevent a bug.

• Detect the tag name inside the

.data() ; • on hover, find matching elements, store the original background color on each element using

then change the background color to yellow using .css() .

.data() ; then restore it using .css() . • When the hover ends, retrieve the original background color with

/*
* Exercise 02-03, Realtime Web Apps
*
* @author Jason Lengstorf <[e-mail]>
* @author Phil Leggetter <[e-mail]>
*/

(function($) {

// Highlights the element contained in the <code> tag
$('code').hover(
function() {
var elem = $(getElementName(this)),
bg = elem.css("background");
elem.data('bg-orig', bg).css({ "background": "yellow" });
},
function() {
var elem = $(getElementName(this)),
bg = elem.data('bg-orig');
$(elem).css({ "background": bg });
}
);

/**
* Retrieves the element name contained within a code tag
*/
function getElementName(element) {
return String($(element).text().match(/\w+/));
}

})(jQuery);
save your code; then reload the htMl and mouse over one of the <code> tags to see the results (shown
in Figure 2-3 ).