Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Dynamic Floating Tool Tips

What is DHTML?

Image Manipulation Techniques

String Gradients the Fun Way!

"The Light Fantastic"

MSIE Page Transition Filters

A Gift of "Life" : The Document Object Model

Multimedia in Microsoft Internet Explorer

Displaying Temporary Pages

What is So Dynamic About Dynamic HTML?

Dynamic Positioning- source

You are here: irt.org | Articles | Dynamic HTML (DHTML) | Dynamic Positioning [ previous next ]

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

Return

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

Related items

Dynamic Floating Tool Tips

What is DHTML?

Image Manipulation Techniques

String Gradients the Fun Way!

"The Light Fantastic"

MSIE Page Transition Filters

A Gift of "Life" : The Document Object Model

Multimedia in Microsoft Internet Explorer

Displaying Temporary Pages

What is So Dynamic About Dynamic HTML?

©2018 Martin Webb