These projects are retired. The development has stopped and we don't provide support for them anymore.

Relative positioning

TODO

Source and example output

Example 2-5. Relative positioning example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Relative positioning example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div", "", "",
"100%","20%",LEFT,"0",TOP,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);

layer2 = new RelativeLayer(
"layer2Div", "layer1Div", "layer1Div",
"30%","60%",LEFT,"0",BOTTOM,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#99dd99");
layer2.setVisible(true);

layer3 = new RelativeLayer(
"layer3Div", "layer2Div", "layer2Div",
"100%-20","20%",LEFT,"0",BOTTOM,"0","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dd9999");
layer3.setVisible(true);

layer4 = new RelativeLayer(
"layer4Div", "layer3Div", "layer3Div",
"30%-20","60%-20",RIGHT,"0",TOP,"0","50%","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#9999dd");
layer4.setVisible(true);
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
    Layer 1.<BR>
    <A HREF="javascript:layer1.visibleMoveBy(-10,0)">Left</A>
    <A HREF="javascript:layer1.visibleMoveBy(10,0)">Right</A>
    <A HREF="javascript:layer1.visibleMoveBy(0,-10)">Up</A>
    <A HREF="javascript:layer1.visibleMoveBy(0,10)">Down</A><BR>
    <A HREF="javascript:layer1.visibleResizeBy(0,'-10')">Shorter</A>
    <A HREF="javascript:layer1.visibleResizeBy(0,'10')">Longer</A><BR>
</DIV>

<DIV ID="layer2Div">
    Layer 2.<BR>
    <A HREF="javascript:layer2.visibleResizeBy('-10',0)">Narrower</A>
    <A HREF="javascript:layer2.visibleResizeBy('10',0)">Wider</A>
    <A HREF="javascript:layer2.visibleResizeBy(0,'-10')">Shorter</A>
    <A HREF="javascript:layer2.visibleResizeBy(0,'10')">Longer</A><BR>
</DIV>

<DIV ID="layer3Div">
    Layer 3.<BR>
    <A HREF="javascript:layer3.visibleResizeBy('-10',0)">Narrower</A>
    <A HREF="javascript:layer3.visibleResizeBy('10',0)">Wider</A>
    <A HREF="javascript:layer3.visibleResizeBy(0,'-10')">Shorter</A>
    <A HREF="javascript:layer3.visibleResizeBy(0,'10')">Longer</A><BR>
</DIV>

<DIV ID="layer4Div">
    Layer 4.<BR>
    <A HREF="javascript:layer4.visibleResizeBy('-10',0)">Narrower</A>
    <A HREF="javascript:layer4.visibleResizeBy('10',0)">Wider</A>
    <A HREF="javascript:layer4.visibleResizeBy(0,'-10')">Shorter</A>
    <A HREF="javascript:layer4.visibleResizeBy(0,'10')">Longer</A><BR>
</DIV>

</BODY>

</HTML>

Remarks

TODO