JavaScript Pocket Reference

Client-side JavaScript

|

47

The following code shows a simple DHTML animation.

Each time it is called, the function

nextFrame() moves an ele-

ment 10 pixels to the right and uses

setTimeout() to tell Java-

Script to call it again in 50 milliseconds. After 20 invocations,

the function uses the

visibility property to hide the ele-

ment and stops calling itself.

<h1 id='title'>DHTML Animation<h1>

<script>

// Look up the element to animate

var e = document.getElementById("title");

// Make it position-able.

e.style.position = "absolute";

var frame = 0; // Initialize frame counter.

// This function moves the element one frame

// at a time, then hides it when done.

function nextFrame() {

if (frame++ < 20) { // Only do 20 frames

e.style.left = (10 * frame) + "px";

// Call ourselves again in 50ms.

setTimeout("nextFrame()", 50);

}

else e.style.visibility="hidden"; // Hide it.

}

nextFrame(); // Start animating now!

</script>

Events and Event Handling

We saw at the beginning of this section that one way to

embed client-side JavaScript into HTML documents is to use

event handler attributes of HTML tags. The following table

visibility Whether the element is visibleor hidden.Space isstill allocated

for non-positioned hidden elements.

overflow What to do when element content exceeds element size. Values:

visible (content overflows); hidden (excess content hidden);

scroll (display permanent scrollbar); auto (scrollbars only when ...