Relative Layers : Events example : Layer Events « Ajax Layer « JavaScript DHTML






Relative Layers : Events example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!--
// RelativeLayers 0.9.7
// 
// $Id: example6.html 1.7 04/02/02 21:22:32+01:00 gbevin@willow.uwyn.office $
// 
// Library for creating dynamic designs that adapt themselves to the user's
// browser environment.
// 
// Copyright (C) 1998-2004, Geert Bevin
// Distributed under the terms of the GNU Lesser General Public, v2.1 or later
// 
// gbevin[remove] at uwyn dot com
// http://www.uwyn.com/projects/relativelayers
-->
<HTML>
<HEAD>
<TITLE>RelativeLayers : Events 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", "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>


           
       








relativelayers-0.9.7.zip( 74 k)

Related examples in the same category

1.Layer: On Content Change Event
2.Layer: On Location Change Event
3.Subclassing events