< d e v h e a d : s c r i p t l i b r a r y >
|
|
Script: 0261
|
Type: JavaScript
|
------------------------------------------------
|
|
To install this script, follow these simple steps:
|
|
1. Cut and paste this script into the HEAD of your document:
|
|
<script LANGUAGE="JavaScript">
|
|
<!-- Hiding Script
|
|
// *****************************
|
// Node 0 = opens in right frame
|
// Node 1 = opens in new window
|
// *****************************
|
|
// *****************************
|
// Generate Data
|
// *****************************
|
|
function generateTree()
|
{
|
var aux1, aux2, aux3, aux4
|
|
foldersTree = folderNode("Start Folder")
|
aux1 = appendChild(foldersTree, folderNode("JavaScript"))
|
aux2 = appendChild(aux1, leafNode("Scripts"))
|
appendChild(aux2, generateDocEntry(0, "JavaScripts.com", "http://www.javascripts.com", ""))
|
appendChild(aux2, generateDocEntry(0, "JavaScript Planet", "http://www.geocities.com/SiliconValley/7116/", ""))
|
appendChild(aux2, generateDocEntry(0, "Polands' JavaScript", "http://www.sapien.net/demo/javascript/", ""))
|
aux2 = appendChild(aux1, leafNode("Tutorials"))
|
appendChild(aux2, generateDocEntry(0, "Ask the JavaScript Pro", "http://www.inquiry.com/techtips/js_pro/", ""))
|
appendChild(aux2, generateDocEntry(0, "JavaScript 411", "http://www.freqgrafx.com/411/", ""))
|
aux1 = appendChild(foldersTree, folderNode("Links"))
|
aux2 = appendChild(aux1, folderNode("Internet"))
|
aux3 = appendChild(aux2, leafNode("Browsers"))
|
appendChild(aux3, generateDocEntry(1, "MS Internet Explorer", "www.microsoft.com/ie/", ""))
|
appendChild(aux3, generateDocEntry(1, "Netscape Communicator", "home.netscape.com", ""))
|
aux3 = appendChild(aux2, leafNode("Computers"))
|
appendChild(aux3,generateDocEntry(1, "PCworld", "www.pcworld.com/welcome.html", ""))
|
appendChild(aux3,generateDocEntry(1, "Byte", "www.byte.com/", ""))
|
appendChild(aux3,generateDocEntry(1, "cNET", "www.cnet.com", ""))
|
appendChild(aux3,generateDocEntry(1, "ZDNet", "www.zdnet.com", ""))
|
aux2 = appendChild(aux1, folderNode("Downloads"))
|
aux3 = appendChild(aux2, leafNode("Shareware"))
|
appendChild(aux3, generateDocEntry(1, "Windows95.com", "www.windows95.com/apps", ""))
|
appendChild(aux3, generateDocEntry(1, "Download.com", "www.download.com", ""))
|
appendChild(aux3, generateDocEntry(1, "ZDNet's Hotfiles", "www.hotfiles.com", ""))
|
aux2 = appendChild(aux1, leafNode("Search"))
|
appendChild(aux2,generateDocEntry(1, "HotBot", "www.hotbot.com", ""))
|
appendChild(aux2,generateDocEntry(1, "Yahoo", "www.yahoo.com", ""))
|
appendChild(aux2,generateDocEntry(1, "Lycos", "www.lycos.com", ""))
|
}
|
|
// *****************************
|
// Auxiliary function to create the node
|
// *****************************
|
function folderNode(name)
|
{
|
var arrayAux
|
arrayAux = new Array
|
arrayAux[0] = 0
|
arrayAux[1] = 0
|
arrayAux[2] = 0
|
arrayAux[3] = name
|
|
return arrayAux
|
}
|
|
// *****************************
|
// Auxiliary function to create the node
|
// *****************************
|
function leafNode(name)
|
{
|
var arrayAux
|
arrayAux = new Array
|
arrayAux[0] = 0
|
arrayAux[1] = 0
|
arrayAux[2] = 1
|
arrayAux[3] = name
|
|
return arrayAux
|
}
|
|
function appendChild(parent, child)
|
{
|
parent[parent.length] = child
|
return child
|
}
|
|
function generateDocEntry(icon, docDescription, link)
|
{
|
var retString =""
|
|
if (icon==0)
|
retString = "<A href='"+link+"' target=folderFrame><img src='doc.gif' alt='Opens in right frame'"
|
else
|
retString = "<A href='http://"+link+"' target=_blank><img src='link.gif' alt='Opens in new window'"
|
retString = retString + " border=0></a><td nowrap><font size=-1 face='Arial, Helvetica'>" + docDescription + "</font>"
|
|
return retString
|
|
}
|
|
|
// *****************************
|
// Display functions
|
// *****************************
|
|
function redrawTree()
|
{
|
var doc = top.treeFrame.window.document
|
|
doc.clear()
|
doc.write("<body bgcolor='white'>")
|
redrawNode(foldersTree, doc, 0, 1, "")
|
doc.close()
|
}
|
|
function redrawNode(foldersNode, doc, level, lastNode, leftSide)
|
{
|
var j=0
|
var i=0
|
|
doc.write("<table border=0 cellspacing=0 cellpadding=0>")
|
doc.write("<tr><td valign = middle nowrap>")
|
|
doc.write(leftSide)
|
|
if (level>0)
|
if (lastNode) //the last 'brother' in the children array
|
{
|
doc.write("<img src='lastnode.gif' width=16 height=22>")
|
leftSide = leftSide + "<img src='blank.gif' width=16 height=22>"
|
}
|
else
|
{
|
doc.write("<img src='node.gif' width=16 height=22>")
|
leftSide = leftSide + "<img src='vertline.gif' width=16 height=22>"
|
}
|
|
displayIconAndLabel(foldersNode, doc)
|
doc.write("</table>")
|
|
if (foldersNode.length > 4 && foldersNode[0]) //there are sub-nodes and the folder is open
|
{
|
if (!foldersNode[2]) //for folders with folders
|
{
|
level=level+1
|
for (i=4; i<foldersNode.length;i++)
|
if (i==foldersNode.length-1)
|
redrawNode(foldersNode[i], doc, level, 1, leftSide)
|
else
|
redrawNode(foldersNode[i], doc, level, 0, leftSide)
|
}
|
else //for folders with documents
|
{
|
for (i=4; i<foldersNode.length;i++)
|
{
|
doc.write("<table border=0 cellspacing=0 cellpadding=0 valign=center>")
|
doc.write("<tr><td nowrap>")
|
doc.write(leftSide)
|
if (i==foldersNode.length - 1)
|
doc.write("<img src='lastnode.gif' width=16 height=22>")
|
else
|
doc.write("<img src='node.gif' width=16 height=22>")
|
doc.write(foldersNode[i])
|
doc.write("</table>")
|
}
|
}
|
}
|
}
|
|
// *****************************
|
// Creates the html code to display a folder and its label
|
// *****************************
|
function displayIconAndLabel(foldersNode, doc)
|
{
|
doc.write("<A href='javascript:top.openBranch(\"" + foldersNode[3] + "\")'><img src=")
|
if (foldersNode[1])
|
doc.write("openfolder.gif width=24 height=22 border=noborder></a>")
|
else
|
doc.write("closedfolder.gif width=24 height=22 border=noborder></a>")
|
doc.write("<td valign=middle align=left nowrap>")
|
doc.write("<font size=-1 face='Arial, Helvetica'>"+foldersNode[3]+"</font>")
|
}
|
|
// *****************************
|
// Recursive functions
|
// *****************************
|
|
//when a parent is closed all children also are
|
function closeFolders(foldersNode)
|
{
|
var i=0
|
|
if (!foldersNode[2])
|
{
|
for (i=4; i< foldersNode.length; i++)
|
closeFolders(foldersNode[i])
|
|
}
|
foldersNode[0] = 0
|
foldersNode[1] = 0
|
}
|
|
//recursive over the tree structure
|
//called by openbranch
|
function clickOnFolderRec(foldersNode, folderName)
|
{
|
var i=0
|
|
if (foldersNode[3] == folderName)
|
{
|
if (foldersNode[0])
|
closeFolders(foldersNode)
|
else
|
{
|
foldersNode[0] = 1
|
foldersNode[1] = 1
|
}
|
}
|
else
|
{
|
if (!foldersNode[2])
|
for (i=4; i< foldersNode.length; i++)
|
clickOnFolderRec(foldersNode[i], folderName)
|
}
|
}
|
|
|
// *****************************
|
// Event handlers
|
// *****************************
|
|
//called when the user clicks on a folder
|
function openBranch(branchName)
|
{
|
clickOnFolderRec(foldersTree, branchName)
|
if (branchName=="Start folder" && foldersTree[0]==0)
|
top.folderFrame.location="basefolder.htm"
|
timeOutId = setTimeout("redrawTree()",100)
|
}
|
|
//called after this html file is loaded
|
function initializeTree()
|
{
|
generateTree()
|
redrawTree()
|
}
|
|
var foldersTree = 0
|
var timeOutId = 0
|
generateTree()
|
|
|
// end hiding script -->
|
|
</script>
|
|
2. Cut and paste this into the BODY of your document:
|
|
<FRAMESET cols="225,*" onLoad='initializeTree()' FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
|
<FRAME src="menu.html" name="treeFrame">
|
<FRAME SRC="main.html" name="folderFrame">
|
</FRAMESET>
|
|
3. Cut and paste this into a new document entitled "menu.html":
|
|
<HTML>
|
<HEAD>
|
<title>Menu</title>
|
</head>
|
|
<body bgcolor='white'>
|
<table border=0 cellspacing=0 cellpadding=0><tr><td valign = middle nowrap><A href='javascript:top.openBranch("Start folder")'><img src=closedfolder.gif width=24 height=22 border=noborder></a><td valign=middle align=left nowrap><font size=-1 face='Arial, Helvetica'>Start folder</font></table>
|
</body>
|
</html>
|
|
4. Cut and paste this into a new document entitled "main.html":
|
|
<HTML>
|
<HEAD>
|
<title>Main Frame</title>
|
</head>
|
|
<body bgcolor="white">
|
<TABLE WIDTH="96%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
|
<TR><TD WIDTH="100%">
|
<FONT FACE="ARIEL,HELVETICA" SIZE="-1">
|
|
<img src="/devhead/graphics/tophead.gif" width="35" height="35" border="0" alt="DevHead"><FONT COLOR="#003399" FACE="ARIEL,HELVETICA" SIZE="-1"><B>Live Demo: Cascading Menu: Starting Frame</B></FONT>
|
<P>
|
The left frame contains a JavaScript Cascading Menu. You have <br>probably seen a Java version of this. Well this is JavaScript, <br>which means it loads much faster. You can layout your site or links<br>in one frame. This works in both Netscape 3.0,4.0 and IE 3.0,4.0.
|
</FONT>
|
</TD></TR>
|
</TABLE>
|
</body>
|
</html>
|
|
5. Don't forget to install all of the graphics (available
|
in the download .zip file).
|
|
------------------------------------------------
|
ZDNet (c) 1999. DevHead and ScriptLibrary provides
|
these scripts as a free service to our users. The
|
scripts have been provided by the author for use
|
within the resource and are "freely distributable."
|
Scripts remain the property of the author, unless
|
otherwise indicated.
|
