JavaScript DHTML/Ajax Layer/Nested Layer
Dynlayers are nested 10 deep
<source lang="html4strict">
<html> <head> <title>Return false test</title> <style> .testClass{
color: red;
}
</style>
<script language="Javascript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath("./dynapisrc/");
dynapi.library.include("dynapi.debug");
dynapi.library.include("dynapi.api");
dynapi.library.include("DragEvent");
</script>
<script language="Javascript">
myHtml="<a style="color:green;" href="http://www.cnn.ru" onclick="alert(\"hi\");return false;">Return false</a>
<a class="testClass" href="http://www.cnn.ru" onclick="alert(\"hi\");return true;">Return true</a>"
function make10(){
myLayers=[]
myLayers[0] = new DynLayer(myHtml,100,200,500,500,"#AA0000")
for(i=1;i<11;i++){
c="#BB"+(i-1)+"A"+(i-1)+"A"
myLayers[i] = new DynLayer(myHtml,30,40,500,500,c)
myLayers[i-1].addChild(myLayers[i])
if(i==10)dynapi.document.addChild(myLayers[0])
}
for(i=0;i<11;i++){
DragEvent.enableDragEvents(myLayers[i])
}
}
</script>
</head>
<body >
<a class="testClass" href="#" onclick="make10()">make 10 nested layers</a>
Issue
This is a test where Dynlayers are nested 10 deep, and each one contains one link with:
style="color="green""
and one with:
class="testClass"
"testClass" has been defined in the <style> tags at the top of the page.
This would mainly affect NS4.
P.s. Only te second link should navigate to CNN each time.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Panel Stacker in JavaScript
<source lang="html4strict">
<html>
<head>
<style>
BODY
{
FONT-SIZE: 10px;
COLOR: white;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.csscontent
{
BACKGROUND-COLOR: #326597;
BORDER-RIGHT: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
.cssmenu
{
BACKGROUND-COLOR: #30557A;
BORDER-TOP: #000000 1px solid;
BORDER-RIGHT: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
td
{
FONT-SIZE: 10px;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none
}
</style>
<title>DynAPI Examples - PanelBar & Stacker</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.api");
dynapi.library.include("dynapi.gui.PanelBar");
dynapi.library.include("dynapi.gui.Stacker");
dynapi.library.include("dynapi.functions.Image");
dynapi.library.include("DragEvent");
</script>
<script language="JavaScript">
f=dynapi.functions;
var imgmin=f.getImage("./dynapiexamples/images/win_min.gif",15,16);
var imgmax=f.getImage("./dynapiexamples/images/win_max.gif",15,16);
var lyrMenu = new DynLayer();
lyrMenu.setClass ("cssmenu");
lyrMenu.setHTML("| My Menu #1 | {@min} |
var lyrContent = new DynLayer("This PanelBar and the two under are in the stacker, the stacker reacts on sizechanges and moves the layers when the size changes.");
lyrContent.setClass ("csscontent");
var lyrPanelBar = new PanelBar(lyrMenu,lyrContent,20,50,50,200,100,false);
lyrPanelBar.setMinMaxImg(imgmin,imgmax);
var lyrMenu1 = new DynLayer();
lyrMenu.setClass ("cssmenu");
lyrMenu1.setClass ("cssmenu");
lyrMenu1.setHTML("| My Menu #2 | {@min} |
var lyrContent1 = new DynLayer("This PanelBar has been created using a layer for the menu and one for the content.");
lyrContent1.setClass ("csscontent");
var lyrPanelBar1 = new PanelBar(lyrMenu1,lyrContent1,20,250,50,200,100,true);
lyrPanelBar1.setMinMaxImg(imgmin,imgmax);
// Create a PanelBar with HTML instead of layers
var lyrPanelBar2 = new PanelBar(
"| My Menu #3 | {@min} |
"This PanelBar has been created using simply html-text instead of two layers.",
20,250,50,200,100,false);
lyrPanelBar2.setMinMaxImg(imgmin,imgmax);
// Manipulate the menu- and contentlayer
lyrPanelBar2.getContentLayer().setClass ("csscontent");
lyrPanelBar2.getMenuLayer().setClass ("cssmenu");
// Just test the empty constructor
// This is important for subclassing
var constructorTest = new PanelBar();
dynapi.document.addChild(lyrPanelBar);
dynapi.document.addChild(lyrPanelBar1);
dynapi.document.addChild(lyrPanelBar2);
var objStacker = new Stacker()
objStacker.add(lyrPanelBar);
objStacker.add(lyrPanelBar1);
objStacker.add(lyrPanelBar2);
</script>
</head>
<body>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Relative Layers : Nested layers example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML> <HEAD> <TITLE>Relative Layers : Nested layers 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">
</SCRIPT> </HEAD> <BODY BGCOLOR="#2F4078">
This is the parent layer.
This is the child layer.
</BODY> </HTML>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/relativelayers-0.9.7.zip">relativelayers-0.9.7.zip( 74 k)</a>
