Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Combining dynamic positioning techniques

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:

<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) {
</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>

Community Additions

© 2015 Microsoft