Java Reference
In-Depth Information
divAdvert.style.left = "100px"; // set the left position
divAdvert.style.top = "100px"; // set the right position
This code first retrieves the
divAdvert
element. Then it sets the element's position to absolute and
moves the element 100 pixels from the left and top edges. Notice the addition of
px
to the value
assigned to the positions. You must specify a unit when assigning a positional value; otherwise, the
browser will not position the element.
Note
Positioning elements requires the position of absolute or relative.
example: animated advertisement
Perhaps the most creative use of DOM scripting is in animating content on the page. You can perform
a variety of animations: you can fade text elements or images in and out, give them a swipe animation
(making it look like as if they are wiped onto the page), and animate them to move around on the page.
Animation can give important information the flair it needs to be easily recognized by your reader,
as well as adding a “that's cool” factor. Performing animation with JavaScript follows the same
principles of any other type of animation: You make seemingly insignificant changes one at a time
in a sequential order until you reach the end of the animation. Essentially, with any animation, you
have the following requisites:
1.
The starting state
2.
The movement toward the final goal
3.
The end state; stopping the animation
Animating an absolutely positioned element, as you're going to do in this section, is no different.
First, with CSS, position the element at the start location. Then perform the animation up until you
reach the end point, which signals the end of the animation.
In this section, you learn how to animate content to bounce back and forth between two points. To
do this, you need one important piece of information: the content's current location.
are We there Yet?
The DOM in modern browsers exposes the
offsetTop
and
offsetLeft
properties of an HTML
element object. These two properties return the calculated position relative to the element's parent
element:
offsetTop
tells you the
top
location, and
offsetLeft
tells you the
left
position. The
values returned by these properties are numerical values, so you can easily check to see where your
element currently is in the animation. For example:
var endPointX = 394;
if (element.offsetLeft < endPointX) {
// continue animation
}
