Dynamic Positioning

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Dynamic Positioning

Published on: Monday 14th September 1998 By: Martin Webb

Source Code for Example 3
Source Code for Example 4
Source Code for Example 7
Source Code for Example 8
Source Code for Example 10
Source Code for Example 11
Source Code for Example 12

Source Code for Example 3

<P>
<STRONG>This is the first sentence.
<SPAN ID="myLayer" STYLE="position: absolute;">
<FONT COLOR="red">Layer Text</FONT>
</SPAN>
This is the second sentence.</STRONG>
</P>

<SCRIPT LANGUAGE="JavaScript"><!--
function interrogate(what) {
    var output = '';
    if (document.layers)
        for (var i in document.layers[what])
            output += i + ' ' + document.layers[what][i] + '\n';
    else if (document.all)
        for (var i in document.all(what))
            output += i + ' ' + document.all(what)[i] + '\n';
    return output;
}
//--></SCRIPT>

<FORM>
<INPUT TYPE="BUTTON" VALUE="Interrogate"
    onClick="this.form.output.value = interrogate('myLayer')">
<P>
<TEXTAREA NAME="output" COLS="40" ROWS="10"></TEXTAREA>
</FORM>

Return

Source Code for Example 4

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}
function hide(object) {
    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
        document.all[object].style.visibility = 'hidden';
}
//--></SCRIPT>

<STYLE TYPE="text/css"><!--
.myStyle {
    position: absolute;
    visibility: hidden;
}
//--></STYLE>

<A HREF="#" onMouseover="show('myLayer1')"
  onMouseout="hide('myLayer1')">Move mouse pointer over this link
text</A>
<DIV ID="myLayer1" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
This text is hidden from view.
<BR>
It is revealed when the mouse
<BR>
moves over the 1st link text
</TD></TR></TABLE>
</DIV>

<A HREF="#" onMouseover="show('myLayer2')"
  onMouseout="hide('myLayer2')">Move mouse pointer over this link
text</A>
<DIV ID="myLayer2" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
This text is also hidden from view until it is
revealed when the mouse moves over the 2nd link text
</TD></TR></TABLE>
</DIV>

Return

Source Code for Example 7

<SPAN ID="myLayer" STYLE="position:absolute; top:50; left:50;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
var object = 'myLayer';

if (document.layers && document.layers[object] != null) {
    document.layers[object].left -= 25;
    document.layers[object].top -= 25;
}
else if (document.all) {
    document.all[object].style.posLeft -= 50;
    document.all[object].style.posTop -= 50;
}
//--></SCRIPT>

Return

Source Code for Example 8

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
function show(object) {
    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}
function hide(object) {
    if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
        document.all[object].style.visibility = 'hidden';
}

function reposition(object,x,y) {
    if (document.layers && document.layers[object] != null) {
        document.layers[object].left += x;
        document.layers[object].top += y;
    }
    else if (document.all) {
        document.all[object].style.posLeft += x;
        document.all[object].style.posTop += y;
    }
}
//--></SCRIPT>

<STYLE TYPE="text/css"><!--
.myStyle {
    position: absolute;
    visibility: hidden;
}
//--></STYLE>

<A HREF="#" onMouseover="show('text1')"
onMouseout="hide('text1')">Reveal layer 1</A>
<BR>
<A HREF="#" onMouseover="show('text2')"
onMouseout="hide('text2')">Reveal layer 2</A>
<BR>
<A HREF="#" onMouseover="show('text3')"
onMouseout="hide('text3')">Reveal layer 3</A>
<BR>

<SPAN ID="text1" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><B>bold<BR>text</B><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>

<SPAN ID="text2" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><I>italic<BR>text</I><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>

<SPAN ID="text3" CLASS="myStyle">
<TABLE BGCOLOR="#FFFFCC"><TR><TD>
Heres<BR>some<BR><FONT
COLOR="#FF0000">red<BR>text</FONT><BR>in<BR>a<BR>layer
</TD></TR></TABLE>
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
reposition('text1',100,-60);
reposition('text2',100,-60);
reposition('text3',100,-60);
//--></SCRIPT>

Return

Source code for Example 10

<SPAN ID="box" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0"  BGCOLOR="#FFCC00"
CELLSPACING="0">
<TR><TD> </TD></TR></TABLE>
</SPAN>

<SPAN ID="sphere" STYLE="position:absolute; width:43; height:43;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
    document.all('box').style.posLeft = 50;
    document.all('box').style.posTop = 50;
    document.all('sphere').style.posLeft = 50;
    document.all('sphere').style.posTop = 50;
}
else if (document.layers) {
    document.layers['box'].left = 50;
    document.layers['box'].top = 50;
    document.layers['sphere'].left = 50;
    document.layers['sphere'].top = 50;
}

var xInc=12, yInc=12;
var xOld=xMin=50, yOld=yMin=50;
var xMax=350, yMax=250;

function moveit() {
    if ((xOld + xInc) >= (xMax-43) || (xOld + xInc) < xMin) xInc *= -1;
    if ((yOld + yInc) >= (yMax-43) || (yOld + yInc) < yMin) yInc *= -1;

    if (document.all) {
        document.all('sphere').style.posLeft = xOld += xInc;
        document.all('sphere').style.posTop = yOld += yInc;
    }
    else if (document.layers) {
        document.layers['sphere'].left = xOld += xInc;
        document.layers['sphere'].top = yOld += yInc;
    }

    setTimeout("moveit()",5);
}

if (document.all || document.layers)
    setTimeout("moveit()",1000);
//--></SCRIPT>

Return

Source code for Example 11

<SPAN ID="box1" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0" CELLSPACING="0">
<TR>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFAA00"> </TD>
</TR>
</TABLE>
</SPAN>

<SPAN ID="sphere" STYLE="position:absolute; width:43; height:43;">
<IMG SRC="sphere.gif" WIDTH="43" HEIGHT="43">
</SPAN>

<SPAN ID="box2" STYLE="position:absolute; width:300; height:200;">
<TABLE WIDTH="300" HEIGHT="200" BORDER="0" CELLSPACING="0">
<TR>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
<TD BGCOLOR="#FFCC00"> </TD>
<TD> </TD>
</TR>
</TABLE>
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
    document.all('box1').style.posLeft = 50;
    document.all('box1').style.posTop = 50;
    document.all('box2').style.posLeft = 50;
    document.all('box2').style.posTop = 50;
    document.all('sphere').style.posLeft = 50;
    document.all('sphere').style.posTop = 50;

    document.all('box1').style.zIndex = 10;
    document.all('box2').style.zIndex = 30;
    document.all('sphere').style.zIndex = 20;
}
else if (document.layers) {
    document.layers['box1'].left = 50;
    document.layers['box1'].top = 50;
    document.layers['box2'].left = 50;
    document.layers['box2'].top = 50;
    document.layers['sphere'].left = 50;
    document.layers['sphere'].top = 50;

    document.layers['box1'].zIndex = 10;
    document.layers['box2'].zIndex = 30;
    document.layers['sphere'].zIndex = 20;
}

var xInc=12, yInc=12;
var xOld=xMin=50, yOld=yMin=50;
var xMax=350, yMax=250;

function moveit() {
    if ((xOld + xInc) >= (xMax-43) || (xOld + xInc) < xMin) xInc *= -1;
    if ((yOld + yInc) >= (yMax-43) || (yOld + yInc) < yMin) yInc *= -1;

    if (document.all) {
        document.all('sphere').style.posLeft = xOld += xInc;
        document.all('sphere').style.posTop = yOld += yInc;
    }
    else if (document.layers) {
        document.layers['sphere'].left = xOld += xInc;
        document.layers['sphere'].top = yOld += yInc;
    }

    setTimeout("moveit()",5);
}

if (document.all || document.layers)
    setTimeout("moveit()",1000);

var swapped = false;

function swap() {
    if (document.all) {
        if (swapped) {
            document.all('box1').style.zIndex = 10;
            document.all('box2').style.zIndex = 30;
        }
        else {
            document.all('box1').style.zIndex = 30;
            document.all('box2').style.zIndex = 10;
        }
    }
    else if (document.layers) {
        if (swapped) {
            document.layers['box1'].zIndex = 30;
            document.layers['box2'].zIndex = 10;
        }
        else {
            document.layers['box1'].zIndex = 10;
            document.layers['box2'].zIndex = 30;
        }
    }
    swapped = !swapped;
}
//--></SCRIPT>

<FORM>
<INPUT TYPE="BUTTON" VALUE="Swap" onClick="swap()">
</FORM>

Return

Source code for Example 12

<SPAN ID="sphere" STYLE="position:absolute; width:100;
height:100;">
<IMG SRC="sphere.gif" WIDTH="100" HEIGHT="100">
</SPAN>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"><!--
if (document.all) {
    document.all('sphere').style.posLeft = 110;
    document.all('sphere').style.posTop = 114;
}
else if (document.layers) {
    document.layers['sphere'].left = 106;
    document.layers['sphere'].top = 102;
}

function changeit() {
    if (document.all)
        document.all('sphere').style.clip =
        'rect(' + t + ' ' + r + ' ' + b + ' ' + l + ')';
    else if (document.layers) {
        document.layers['sphere'].clip.top = t;
        document.layers['sphere'].clip.right = r;
        document.layers['sphere'].clip.bottom = b;
        document.layers['sphere'].clip.left = l;
    }
    document.forms[0].top.value = t;
    document.forms[0].right.value = r;
    document.forms[0].left.value = l;
    document.forms[0].bottom.value = b;
}

var t=0, r=100, b=100, l=0;
//--></SCRIPT>

<FORM>
<TABLE HEIGHT="300" WIDTH="300">
<TR HEIGHT="100" WIDTH="100">
<TD VALIGN="MIDDLE" ALIGN="CENTER">
top<BR><INPUT TYPE="TEXT" NAME="top" SIZE="3">
</TD>
<TD VALIGN="MIDDLE" ALIGN="CENTER">
<INPUT TYPE="BUTTON" VALUE=" /\ " onClick="t-=10;changeit()">
<BR>
<INPUT TYPE="BUTTON" VALUE=" \/ " onClick="t+=10;changeit()">
</TD>
<TD VALIGN="MIDDLE" ALIGN="CENTER">
right<BR><INPUT TYPE="TEXT" NAME="right" SIZE="3">
</TD>
</TR>
<TR HEIGHT="100" WIDTH="100">
<TD VALIGN="MIDDLE" ALIGN="CENTER">
<INPUT TYPE="BUTTON" VALUE=" < " onClick="l-=10;changeit()">
<INPUT TYPE="BUTTON" VALUE=" > " onClick="l+=10;changeit()">
</TD>
<TD>
</TD>
<TD VALIGN="MIDDLE" ALIGN="CENTER">
<INPUT TYPE="BUTTON" VALUE=" < " onClick="r-=10;changeit()">
<INPUT TYPE="BUTTON" VALUE=" > " onClick="r+=10;changeit()">
</TD>
</TR>
<TR HEIGHT="100" WIDTH="100">
<TD VALIGN="MIDDLE" ALIGN="CENTER">
left<BR><INPUT TYPE="TEXT" NAME="left" SIZE="3">
</TD>
<TD VALIGN="MIDDLE" ALIGN="CENTER">
<INPUT TYPE="BUTTON" VALUE=" /\ " onClick="b-=10;changeit()">
<BR>
<INPUT TYPE="BUTTON" VALUE=" \/ " onClick="b+=10;changeit()">
</TD>
<TD VALIGN="MIDDLE" ALIGN="CENTER">
bottom<BR><INPUT TYPE="TEXT" NAME="bottom" SIZE="3">
</TD>
</TR>
</TABLE>
</FORM>

Return

Feedback on 'Dynamic Positioning'

Dynamic Positioning - Sinne Rasmussen January 05, 2002 at 22:34:16:
Dynamic Positioning - Brian Forsyth November 29, 2001 at 11:54:23:
Dynamic Positioning - Ray 20:41:52 5/02/01
Dynamic Positioning - Lisa 17:54:29 11/24/00
Dynamic Positioning - Ian Ornstein 14:58:21 9/11/00
Dynamic Positioning - michel 03:35:04 8/21/00
Dynamic Positioning - Paul Sirugo 16:53:20 7/29/00
Dynamic Positioning - Harry 08:56:55 7/17/00
Dynamic Positioning - Glenn Brude 03:36:16 4/17/00
Dynamic Positioning - Peter Lloyd 03:52:33 2/10/00
Dynamic Positioning - Ravindra 03:15:08 7/19/99
Dynamic Positioning - matt r 11:29:49 12/13/98
Dynamic Positioning - john beardsworth 14:34:16 10/11/98

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.