Layer Inline

Layer Inline : Layer Creation : Ajax Layer JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Layer Creation »




http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>
<head>
<title>DynAPI Examples - DynLayer [Inline]</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.library');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.api.ext.DynLayerInline');
</script>
<script language="Javascript">

var mylayer, mychild, mygrandchild ;

dynapi.onLoad(init);

function init() {
  mylayer = DynLayer.getInline("mylayer");
  mychild = DynLayer.getInline("mychild", mylayer);

  // new method
  mygrandchild = new DynLayer(); // create layer
  mygrandchild.setID('mygrandchild',true); // set inline id
  mychild.addChild(mygrandchild); //make sure to add the child to it's parent!

  var el = {
    onmousedown : function(e) {
      dynapi.debug.print('mousedown on '+e.getSource().id)
      e.preventBubble();
    }
  }

  mylayer.addEventListener(el);
  mychild.addEventListener(el);
  mygrandchild.addEventListener(el);
};

function checkProperties(dlyr) {
  var str = 'id = '+dlyr.id+'n'+
  'parent id = '+dlyr.parent.id+'n'+
  'x = '+dlyr.x+'n'+
  'y = '+dlyr.y+'n'+
  'w = '+dlyr.w+'n'+
  'h = '+dlyr.h+'n'+
  'clip = '+dlyr.clip+'n'+
  'z = '+dlyr.z+'n'+
  'visible = '+dlyr.visible+'n'+
  'bgColor = '+dlyr.bgColor+'n'+
  'bgImage = '+dlyr.bgImage+'n'+
  'html = '+dlyr.html+'n';

  alert(str);
}

</script>
<style type="text/css">
<!--

#mylayer {position:absolute; left:250px; top:50px; width:200px; height:200px; clip:rect(0px 200px 200px 0px); background-color:red; layer-background-color:red;}
#mychild {position:absolute; left:50px; top:50px; background-color:yellow; z-index:5; layer-background-color:yellow; layer-background-image:url("../src/dynapi/images/blank.gif");}
#mygrandchild {position:absolute; left:50px; top:100px; background-color:lime; z-index:5; layer-background-color:lime; layer-background-image:url("../src/dynapi/images/blank.gif");}

-->
</style>
</head>
<body bgcolor="#999999">

<p>Check Properties of:<br>
<a href="javascript:checkProperties(mylayer)">mylayer</a><br>
<a href="javascript:checkProperties(mychild)">mychild</a><br>
<a href="javascript:checkProperties(mygrandchild)">mygrandchild</a>

<div id="mylayer">
mylayer is inline
  <div id="mychild">
  mychild is inline
    <div id="mygrandchild">
    mygrandchild is inline
    </div>
  </div>
</div>

</body>
</html>