HTML and CSS Reference
In-Depth Information
The CSS style sheet creates classes that will be used to position the first three div
These variables will be used by the functions in the JavaScript code.
After the document has been loaded, the window's onload event will be triggered
and the anonymous function called.
The getElementById() method returns references to three div block objects.
A function called startPosition() is defined. It will put the div elements back in
their original positions after they have been moved.
A function called movePosition() is defined. It is responsible for moving the text
to different positions on the screen.
The first block of text will be positioned at 50 pixels from the left side of the
screen and 150 pixels from the top.
The second block of text will be positioned at 100 pixels from the left side of the
screen and 100 pixels from the top.
The third block of text will be positioned 150 pixels from the left side of the screen
and 50 pixels from the top.
The div containers are given an id and a class that will assign absolute positions
on the page. Each div block will contain a string of text.
When the user clicks the button labeled “move text”, the onClick event will be
triggered, causing the text to be moved to a different location on the page. See
Figure 14.35.
Figure 14.35 After the user clicks the “move text” button, the div containers are moved.
Revisiting the z-index and Dynamic Positioning. On page 583 of this chapter,
the zIndex property was described to create a three-dimensional effect with a stack of
<div> containers. In Example 14.31 a JavaScript program manipulates the containers so
that they can be moved into different positions.
Search WWH ::

Custom Search