Dynamic Positioning | Programming Microsoft Visual InterDev 6.0

Dynamic positioning gives you the ability to move elements around on the page within the browser without having to take any round trips back to the server. This means you can create specialized animation effects and manipulate all elements in the browser as required. This can be especially useful for advertisements or for changing the screen appearance based upon user input. For instance, you may want to give users a way to arrange the layout of the screen to suit their individual preferences.

As an example, take a look at the code shown in Figure 7-5. This code comes from DynamicPositioning.htm in the Chap07 folder on the CD-ROM.

Figure 7-5. A dynamic positioning example showing how to move an image from right to left across the browser window.

 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <HEAD> <TITLE>Dynamic Positioning</TITLE> <SCRIPT LANGUAGE="JScript"> var id; function StartGlide() {     document.all.Banner.style.pixelLeft =          document.body.offsetWidth;     document.all.Banner.style.visibility = "visible";     id = window.setInterval("Glide()",50); } function Glide() {     document.all.Banner.style.pixelLeft -= 10;     if (document.all.Banner.style.pixelLeft<=0) {         document.all.Banner.style.pixelLeft=0;         window.clearInterval(id);     } } </SCRIPT> </HEAD> <BODY onload="StartGlide()"> <BR> <H3>Dynamic HTML - Dynamic Positioning Example</H3> <HR> <P>With dynamic positioning, you can move images anywhere in the  document even while the user views the document. <IMG ID="Banner"  STYLE="visibility:hidden;position:absolute;top:0;left:0;z-index:-1"  SRC="images/msft.gif"> </BODY> </HTML>

The code takes the Microsoft logo, msft.gif, and moves it from right to left across the top of the screen. The speed and direction of the animation can be exactly controlled. The pixelLeft property sets or retrieves the left position of the element, in pixels. The Glide function decrements the value of the pixelLeft property by 10 each time it is called by the StartGlide function. The StartGlide function uses the window.setInterval method to repeatedly call the Glide function every 50 milliseconds.