javascript

CHAPTER 9 ■ LISTENING FOR EVENTS
366
Now let’s iterate over the Element nodes in elements. Remember from Chapter 4 that looping in
reverse is snappier in that we can test and update the loop variable i in a single expression. Note too that
we want to initialize i to elements.length so that we don’t slow things down by querying
elements.length every roundabout of the loop. Finally, initialize a variable named offsets to null since
it will later contain an array of offsets identifying where the sprites are:
function prepSprites() {
var elements = findClass("sprite"), sprites = {};
for (var i = elements.length, offsets = null; i --; ) {
}
function slideSprite() {
}
}
Now for every Element node in elements, we want to name a member in sprites with the value of its
id attribute. So, relative to our XHTML markup, sprites will contain members named "adidas", "asics",
"brooks", and so on. Those will initially contain an empty array, which we will create with array literal
notation, since that is snappier than doing so with new and Array():
function prepSprites() {
var elements = findClass("sprite"), sprites = {};
for (var i = elements.length, offsets = null; i --; ) {
sprites[elements[i].id] = [];
}
function slideSprite() {
}
}
Now we have to work around some Internet Explorer 8 or earlier skullduggery. Querying
currentStyle.backgroundPosition for an element returns undefined even though querying
style.backgroundPosition for the very same element returns the horizontal and vertical offsets of the
background image. I know, that’s preposterous.
Are those offsets simply missing in currentStyle?
No, they’re just in a different drawer. Internet Explorer 8 or earlier separates them into members
named backgroundPositionX and backgroundPositionY. We will have to code one path for Explorer 9,
Firefox, Safari, Chrome, and Opera and another for Internet Explorer 8 or earlier. Let’s do the former
first. Test for the DOM method getComputedStyle(), and then query backgroundPosition, saving that to
sprites[elements[i].id][0]. So for example, sprites.saucony[0] will contain "0px -135px", which is
the off position for the sprite (the position when the mouse is off the sprite).
Now we need to separate the horizontal and vertical offsets. To do so, call String.split() on the off
position that we just saved to elements[i].id][0]. Remember from Chapter 2 that String.split()
returns an array of smaller strings created by separating the larger string relative to its parameter. So if
we divide the off string based on whitespace, we get an array with two elements. So for the Saucony
sprite, the array would be as follows:
["0px", "-135px"]
Save that to the offsets variable that we initialized to null a moment ago. So we now have this:
function prepSprites() {
var elements = findClass("sprite"), sprites = {};
for (var i = elements.length, offsets = null; i --; ) {
sprites[elements[i].id] = [];
if (typeof getComputedStyle === "function") {
sprites[elements[i].id][0] = queryCascade(elements[i], "backgroundPosition");
offsets = sprites[elements[i].id][0].split(/\s+/);