Moving a Layer Around on the Page

Moving a gives you the opportunity for some interesting, albeit superfluous, effects, such as curtains opening or graphics sliding into place By moving a layer across the screen in increments, you achieve the same effect as a curtain revealing a stage. <html>
<head>
<title>Multiple Layers </title>
</head>
<script language="javascript">
<!--
function leftmove()

document.layers["curtain "I.moveAbove(document, layers ["thetext']);
curtainWidth = 800;
Var moveBy = -1;

while,(curtaihWidth > - 1)

{
document.layers ["curtain "].offset(moveBy, 0); curtainWidth += moveBy;
}
document. layers ["curtain"].visibility = "hide";
}
//-->
</script>
<body>

<H1> Something is going. I am moving. Help!!! </H1>

</layer> <layer name=thetext top=5 left=5>

<P>Click<A href="tempor.htmI" fitle="Eveniet">me<A> mostly nothing may happen.</P>

</layer>
<script language="javascript">
<!--

leftmove();
//-->
</script>
</body>

</html>

This page begins with a heading in a layer. Because it's the first element on the page, it automatically occupies the top-left position and fills the window from left to right. The red background makes the curtain opaque. The next layer is the body text. It is positioned at the top-left corner of the window below the heading text.

To begin, get the windowWidth property from the current window, which enables you to know in how wide a space the curtain will be working, Then, begin with an offset value, which is decremented to move the curtain in a left-to-right motion using the moveTo method of the layer. After the layer is moved over, the offset is decremented by 10 pixels and the loop continues until it has traversed the screen.

As an added safety to make sure the curtain moves out of the way, you also set the visibility property of the layer to hide to ensure that it's completely hidden from view on the page.

Domain Name Search

Moving a Layer Around on the Page

Domain Names

DHTML

Web Design

Web Hosting

E Commerce

Email