Skip to Main Content
Head Rush Ajax
book

Head Rush Ajax

by Brett McLaughlin
March 2006
Beginner to intermediate content levelBeginner to intermediate
448 pages
13h 33m
English
O'Reilly Media, Inc.
Content preview from Head Rush Ajax
you’re on your way 4
267
developing dom apps
Now that you know how many CDs there are in the Top 5, you
can start adding a ranking number to each CD as it’s added.
Here’s a look again at how we want the CD ranking to look.
Adding the ranking number
The CD cover is an <img>
element, and a child node of
the “top5” <div>.
The ranking is a white
number inside a black box,
overlaid on the top-left of
the CD cover image.
We need a text element for the ranking number. For the current ranking,
we can just add one to numCds. But getting the formatting of the
ranking isn’t a JavaScript thing... we handle style with CSS, right?
Let’s create a new <span> to put the ranking in, and then create some
CSS to style the <span> just like we want it. So here’s what we want
the “top5” <div> part of the DOM tree to look like:
More additions to our DOM tree
div
img
img
body
span
span
div
“2”
“1”
Here are the <img> elements
for the CD covers.
There should be a <span> for
each <img> element, just before
the <img> the <span> ranks.
The ranking itself is just a text
node with a number.
The “top5” <div>.
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Head First Ajax

Head First Ajax

Rebecca M. Riordan

Publisher Resources

ISBN: 0596102259Errata PageSupplemental Content