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

Chapter 3. Advanced features

In this chapter, advanced features of RelativeLayers will be explained.

Events

TODO

Source and example output

Example 3-1. Events example

<HTML>
<HEAD>
<TITLE>RelativeLayers : Events example</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_error.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="rl_browser.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_utility.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_window.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rl_layer.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div", "layer2Div", "layer2Div",
"30%","20%",LEFT,"0",TOP,"0","-50%","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);
layer1.addEventListener("visibleresizeby", layer1Resize);

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

layer3 = new RelativeLayer(
"layer3Div", "", "",
"30%","20%",LEFT,"50%",BOTTOM,"0","0","50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dd9999");
layer3.setVisible(true);
layer3.addEventListener("visibleresizeby", layer3Resize);

function layer1Resize(event)
{
    layer2.visibleResizeBy(0, event.heightdiff*-1, false);
};

function layer2Resize(event)
{
    layer1.visibleResizeBy(0, (event.heightdiff*-1)/2, false);
    layer3.visibleResizeBy(0, (event.heightdiff*-1)/2, false);
};

function layer3Resize(event)
{
    layer2.visibleResizeBy(0, event.heightdiff*-1, false);
};
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
    Layer 1.<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(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(0,'-10')">Shorter</A>
    <A HREF="javascript:layer3.visibleResizeBy(0,'10')">Longer</A><BR>
</DIV>

</BODY>

</HTML>

Remarks

TODO