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:
![]() | |
---|---|
<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> |