You can combine dynamic positioning techniques to manipulate multiple items on the page. For example, you could rework the scripting function of an onload event to have a piece of text "fly in" from off-screen. This function could be based on a timer that would move the inner DIV element from an initial top and left coordinate somewhere off the visible part of the page. Over a specified period of time, the function could move it to a position that would be in the center of the outer DIV element.

The following example makes the DIV element visible and animates the content to glide across the screen:

 Copy Code
<html>
<head><title>Glide the div</title>
<script language="Jscript">
var action;
function StartGlide() {
    Banner.style.pixelLeft = document.body.offsetWidth;
    Banner.style.visibility = "visible";
    action = window.setInterval("Glide()",50);
}
function Glide() {
    document.all.Banner.style.pixelLeft -= 10;
    if (Banner.style.pixelLeft<=0) {
        Banner.style.pixelLeft=0;
        window.clearInterval(action);
   }
}
</script>
</head><body onload="StartGlide()">
<p>With dynamic positioning, you can move elements and their content
   anywhere in the document even after the document has loaded!
<div id="Banner" style="visibility: hidden; position: absolute;
   top: 0px; left: 0px;">Welcome to Dynamic HTML!<div>
</body>
</html>

See also