Outline Everywhere
Introduction
Building an Outline
Reviewing the Code
Creating Dynamic Pages for all browsers requires client-side refreshing of the page.
|
|
|
Reviewing the Code
This page includes the complete set of functions necessary to generate the outline.
This script needs to be included or referenced by the frame that contains your outline:
<SCRIPT LANGUAGE="JavaScript">
<!--
/* This code may be reused as long as the following copyright notice
is not removed:
Copyright 1997 by Scott Isaacs - http://www.insideDHTML.com */
// Reference the target frame for any navigations
var targetURL = parent.DEMO
// Data Structure for the outline
var outline = new Array()
function addOutline(name, parentID, children) {
// Data Structure for each item in the outline
var idx = outline.length
outline[idx] = new Object
outline[idx].name = name // The text to display
outline[idx].parent = parentID // The ID of the parent item
outline[idx].children = children // Boolean if the item has any children
outline[idx].url = arguments[3] // The URL if one is specified, otherwise null
}
function spaceIt(amount, what) {
// Returns a string with the character "what" repeated "amount" times
var str=""
for (i = 0; i < amount; i++)
str+=what
return str
}
function outputOutline() {
// Generate the HTML for the outline
var cnt = 0, expanded = false;
var p = -1, level = 0
/* Store the state of the outline in the parent FRAMESET document.
If this is the first time the function is called, initialize the state. */
if (parent.expand==null)
parent.expand = spaceIt(outline.length,"0")
// Enumerate each item in the outline
for (var item in outline) {
outline[item].index = cnt
var a = ""
ok = true
var str = parent.expand
p = outline[item].parent
level = 0
if (p!=-1) {
temp = p
// Determine level's deep and whether to display the item
while (temp!=-1) {
if (str.substring(outline[temp].index,outline[temp].index+1)=="0")
ok = false
level++
temp = outline[temp].parent
}
}
if (ok) {
// Build the HTML for the item
if (p!=-1)
a+="<FONT FACE=verdana SIZE=-1>" + spaceIt(level," ")
if ((outline[item].children) || (outline[item].url!=null)) {
a += "<A NAME="+cnt+" ONCLICK='return doOutline(this)'"
a+=" href="+cnt
a+=">"
}
if (p==-1)
a+="<FONT face=arial COLOR=LIGHTGREEN>"
a += outline[item].name
if ((outline[item].children) || (outline[item].url!=null))
a += "</A>"
a += "</FONT><BR>"
document.write(a)
}
cnt++
}
}
function doOutline(a) {
// User clicked on an item in the outline
// Get the index of the item
var idx = parseInt(a.href.substring(a.href.lastIndexOf("/")+1));
// Navigate to the URL if one is specified
if (outline[idx].url!=null)
targetURL.location = outline[idx].url
if (outline[idx].children) {
var state= parent.expand.substring(idx,idx+1) == "1" ? "0" : "1"
parent.expand = parent.expand.substring(0,idx) + state + parent.expand.substring(idx+1)
// // Open and Close required to work around a change in Netscape 4.04
document.open()
document.close()
location.reload()
// Scroll to the item
location.hash = idx
}
return false;
}
// Define the sample outline
addOutline("Inside DHTML",-1,true)
addOutline("Features",0,true)
addOutline("Book Information",1,false)
addOutline("Fun and Games", 1, false)
addOutline("The 10k Demo", 1, false)
addOutline("XML Online", 1, false)
addOutline("CSS Online",1, false)
addOutline("Developers Paradise", 0, true)
addOutline("Positioning Library", 7, false)
addOutline("Inside Techniques", 7, false)
addOutline("Inside Scriptlets", 7, false)
addOutline("DHTML Toolkits", 7, false)
addOutline("Site Information",0,true)
addOutline("About InsideDHTML", 12, false)
addOutline("Trophy Room", 12, false)
// -->
</SCRIPT>
www.insideDHTML.com
© 1997 by Scott Isaacs
|