Layer Anchor Demo : Layer Anchor : Ajax Layer JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Layer Anchor »

 

Layer Anchor Demo




http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999
<html>

<head>
<title>DynAPI Examples - DynLayer Anchor</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.debug');
dynapi.library.include('dynapi.library');
dynapi.library.include('dynapi.api');
dynapi.library.include('DragEvent');
</script>
<script language="Javascript">

var bb = new DynLayer();
bb.setBgColor('black');
bb.setAnchor({left:1,right:1,top:1,bottom:1});

var main = new DynLayer();
main.setBgColor('#999999');
main.setAnchor({left:1,right:1,top:1,bottom:1});
bb.addChild(main);

var anchorlayer = new DynLayer();
anchorlayer.setBgColor('black');
anchorlayer.setSize(200,100);
anchorlayer.setLocation(100,100);

var nw = anchorlayer.addChildnew DynLayer() );
nw.setBgColor('yellow');
nw.setSize(15,15);
nw.setAnchor({left:0,top:0});

var ne = anchorlayer.addChildnew DynLayer() );
ne.setBgColor('yellow');
ne.setSize(15,15);
ne.setAnchor({right:0,top:0, bottom:0});

var sw = anchorlayer.addChildnew DynLayer() );
sw.setBgColor('yellow');
sw.setSize(15,15);
sw.setAnchor({left:0,bottom:0});

var se = anchorlayer.addChildnew DynLayer() );
se.setBgColor('yellow');
se.setSize(15,15);
se.setAnchor({right:0,bottom:0});

var n = anchorlayer.addChildnew DynLayer() );
n.setHeight(5);
n.setBgColor('green');
n.setAnchor({left:20,top:5,right:20});

var s = anchorlayer.addChildnew DynLayer() );
s.setHeight(5);
s.setBgColor('green');
s.setAnchor({left:20,bottom:5,right:20});

var e = anchorlayer.addChildnew DynLayer() );
e.setWidth(5);
e.setBgColor('green');
e.setAnchor({right:5,top:20,bottom:20});

var w = anchorlayer.addChildnew DynLayer() );
w.setWidth(5);
w.setBgColor('green');
w.setAnchor({left:5,top:20,bottom:20});

var cn = anchorlayer.addChildnew DynLayer() );
cn.setSize(20,10);
cn.setBgColor('red');
cn.setAnchor({top:15,centerH:0});

var cn = anchorlayer.addChildnew DynLayer() );
cn.setSize(20,10);
cn.setBgColor('red');
cn.setAnchor({top:15,centerH:0});

var cs = anchorlayer.addChildnew DynLayer() );
cs.setSize(20,10);
cs.setBgColor('red');
cs.setAnchor({bottom:15,centerH:0});

var ce = anchorlayer.addChildnew DynLayer() );
ce.setSize(10,20);
ce.setBgColor('red');
ce.setAnchor({right:15,centerV:0});

var cw = anchorlayer.addChildnew DynLayer() );
cw.setSize(10,20);
cw.setBgColor('red');
cw.setAnchor({left:15,centerV:0});

var chv = anchorlayer.addChildnew DynLayer() );
chv.setSize(20,20);
chv.setBgColor('blue');
chv.setAnchor({centerH:0,centerV:0});


var box = new DynLayer();
box.setBgColor('white');
box.setSize(100,100);
box.setAnchor({right:10,bottom:10});

var bluesquare = new DynLayer();
bluesquare.setBgColor('blue');
bluesquare.setSize(10,10);
bluesquare.setAnchor({left:0,top:0});
box.addChild(bluesquare);

main.addChild(box);

main.addChild(anchorlayer)

dynapi.document.addChild(bb);

dynapi.onLoad(init);
function init() {
  str = '// Try these tests:nn'+
  'anchorlayer.setLocation(50,50);n'+
  'anchorlayer.setSize(300,200);n'+
  '//anchorlayer.setAnchor({left:0,right:0,top:0,bottom:0});nn'+

  'bluesquare.setSize(10,10);  // must reset size if it is no longer 10x10nn'+
  '// Align:n'+
  'bluesquare.setAnchor({right:0,bottom:0});n'+
  '//bluesquare.setAnchor({right:0,top:0});n'+
  '//bluesquare.setAnchor({left:0,top:0});n'+
  '//bluesquare.setAnchor({left:0,bottom:0});n'+
  '// Strech:n'+
  '//bluesquare.setAnchor({left:0,right:0,bottom:0});n'+
  '//bluesquare.setAnchor({left:0,right:0,top:0});n'+
  '//bluesquare.setAnchor({left:0,top:0,bottom:0});n'+
  '//bluesquare.setAnchor({right:0,top:0,bottom:0});n'+
  '// Center:n'+
  '//bluesquare.setAnchor({centerV:0,centerH:0});n';
  dynapi.debug.setEvaluate(str);
}

</script>
</head>
<body bgcolor="white">

<script>
dynapi.document.insertAllChildren();
</script>

</body>
</html>

           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


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

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Ajax Layer
» Layer Anchor