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:

<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

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.

Community Additions

ADD
Show:
© 2014 Microsoft