In this chapter, advanced features of RelativeLayers will be explained.
TODO
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> |