Dynamic HTML and the W3C Document Object Model - Beginning JavaScript - page 435

Inside the body of the page is a <div/> element. This element has an id of divAdvert so that you can
retrieve it with the getElementById() method, as this is the element you want to animate.
<div id=”divAdvert”>Here is an advertisement.</div>
There are no style attributes in this element because all the style information is inside the style sheet
located in the head of the page. In the style sheet, you defi ne a starting point for this <div/> . You want
the animation to go fi rst from left to right, and you want it to start at the left edge of the browser.
#divAdvert
{
position: absolute;
font: 12pt arial;
top: 4px;
left: 0px;
}
The fi rst style declaration positions the element absolutely, and the second specifi es the font as 12-point
Arial. The next declaration positions the element four pixels from the top of the browser's viewport.
Setting the top position away from the topmost edge makes the text a little easier to read. Finally, the
last line positions the divAdvert element along the left edge of the viewport with the left property.
Within the script block is a global variable called switchDirection .
var switchDirection = false;
This variable keeps track of the direction in which the content is currently going. If switchDirection
is false, then the content is moving from left to right, which is the default. If switchDirection is
true, then the content is moving from right to left.
Next in the script block is the doAnimation() function, which performs the animation.
function doAnimation()
{
var divAdvert = document.getElementById(“divAdvert”); //Get the element
var currentLeft = divAdvert.offsetLeft; //Get the current left position
var newLocation; //Will store the new location
First, you retrieve the divAdvert element with the getElementById() method; you also retrieve the
offsetLeft property and assign its value to the currentLeft variable. You use this variable to check
the content's current position. Next, create a variable called newLocation which will contain the new
left position, but before you assign its value you need to know the direction in which the content is
moving.
if (switchDirection == false)
{
newLocation = currentLeft + 2;
if (currentLeft >= 400)
{
switchDirection = true;
}
}