HTML and CSS Reference
In-Depth Information
EXPLANATION
1
An ID selector is defined with a style for the
div
element on line 13.
2
The size of the
div
container is defined.
3
If the text within the
div
container will not fit within the dimensions of the box,
the
overflow
property will adjust it to fit.
4
The image is fixed at this absolute position on the screen and has a dark green,
solid border.
5
The
scroller()
routine (line 8), modified from the original, was found at the Java
Planet Web site and submitted by Dave Methvin. (Thank you Dave, wherever
you are!)
6
The initial values used for the
scroller()
function are assigned values. One is the
speed for the timer, the other the value of an argument to the
substr()
method.
7
This anonymous function is called after the document has been loaded. Its pur-
pose is to get a reference to the
div
element. The
getElementById()
method returns
a reference to the
div
element.
8
The function called
scroller()
is defined. Its function is to cause the text found in
the
<div>
container to scroll continuously from the right side of the container.
9
The window's
setTimeout()
method is used to call the
scroller()
function every
200 milliseconds (.2 seconds). It's the timer that creates the action of actually
scrolling.
10
The
div
element is a parent node. It has a child node. The value of its first child,
divElement.firstChild.nodeValue
, is the textual content of the message; that is, the
text found between the
<div></div>
tags. The variable
msg
gets the value of the
child node.
11
The value returned by
msg.substr(1)
is “
he latest news from Baghdad is not good to-
night. Sand and rain are hindering our troops. The number of refugees continues to in-
crease in the north...”
Notice that the first character in the message has been re-
moved. The next substring method will return the first character—
substring(0,1
)—and append it to the first value resulting in “
he latest news from
Baghdad is not good tonight. Sand and rain are hindering our troops. The number of
refugees continues to increase in the north...
T
”.
All of this is assigned back to the val-
ue of the child node. In 200 milliseconds, the
scroller()
function is called again,
and the message becomes “
e latest news from Baghdad is not good tonight. Sand and
rain are hindering our troops. The number of refugees continues to increase in the
north...
Th
”,
and so on.
12
The
scroller()
function is called for the first time here.
13
The
<div>
tags contain the text of the message that will be scrolled. Its id,
“div1”
,
defines the CSS style that will be used, and is the unique identifier that will be
used by JavaScript to get a reference to it. See the output in Figure 15.32.
