Relative Layers : Layer Creation : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Layer Creation »

 

Relative Layers




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

<!--
// RelativeLayers 0.9.7
// 
// $Id: example10.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>Relative Layers : Dynamic creation 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" SRC="rl_limits_stripped.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
layer1 = new RelativeLayer(
"layer1Div""""",
"100%-20","AUTO",LEFT,"10",TOP,"10","-50%","-50%",
"100%","100%",LEFT,"50%",TOP,"50%","0","0",
"#dddddd");
layer1.setVisible(true);

function createSecondLayer()
{
  var width = Math.floor(Math.random()*70)+10;
  var height = Math.floor(Math.random()*70)+10;
  var leftdistance = Math.floor(Math.random()*100);
  var topdistance = Math.floor(Math.random()*100);

  layer2 = new RelativeLayer(
  "layer2Div""""",
  width+"%",height+"%",LEFT,leftdistance+"%",TOP,topdistance+"%","-50%","-50%",
  "100%","100%",LEFT,"50%",TOP,"50%","0","0",
  "#ffffff");
  layer2.addLimit(TOPEDGE, BELOW, "layer1Div", BOTTOM, 10);
  layer2.addLimit(BOTTOMEDGE, ABOVE, "", BOTTOM, -10);
  layer2.addLimit(LEFTEDGE, RIGHTSIDE, "", LEFT, 10);
  layer2.addLimit(RIGHTEDGE, LEFTSIDE, "", RIGHT, -10);
  layer2.addEventListener("create", writeLayer2Contents);
  layer2.createLayer();
  layer2.setVisible(true);
};

function writeLayer2Contents()
{
    layer2.setHtml("<BR>n<CENTER><B>This layer has been created dynamically.</B></CENTER><BR>");
};
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#2F4078">

<DIV ID="layer1Div">
    <A HREF='javascript:createSecondLayer();'>create layer</A><BR>
    <A HREF='javascript:layer2.destroyLayer();'>destroy layer</A><BR>
</DIV>

</BODY>

</HTML>

           
       

Download : Download nav_relativelayers-0.9.7.zip nav_relativelayers-0.9.7.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Layer Creation