These projects are retired. The development has stopped and we don't provide support for them anymore.
Chapter 3. Advanced features
- Table of Contents
- Events
- Limits
- Drag & drop
- External source
- Dynamic creation
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