Posted on 1998-07-06
Last Modified: 2010-05-18
I have a DHTML outline that works in IE great. I am hoping there is a way to have cross browser DHTML that would allow me to have this outline work in both IE and Netscape...

You can find the page at:

Question by:jkelly061597

Accepted Solution

jbrugman earned 50 total points
ID: 1844571
There is an example for this on the site of danny goodman.
Look at
Good luck

PS. I downloaded it for you...

                                Version 2.0
                    by Danny Goodman (
                    Analyzed and described at length in
                             "JavaScript Bible"
                              by Danny Goodman
                      (IDG Books ISBN 0-7645-3022-4)
    This program is Copyright 1996 by Danny Goodman.  You may adapt
    this outliner for your Web pages, provided these opening credit
    lines (down to the lower dividing line) are in your outliner HTML document.
    You may not reprint or redistribute this code without permission from
    the author.
     21 February 1997  Added intelligence so that clicking on a fully nested
                       widget icon does not cause the outline to reload.
     24 October 1997   Script speedup for Navigator 4, reduces access to cookie
<TITLE>Food Selection Outline</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">

<!-- begin hiding

// size of horizontal indent per level
var indentPixels = 20

// art files and sizes for three widget styles
// (all three widgets must have same height/width)
var collapsedWidget = "plus.gif"
var expandedWidget = "minus.gif"
var endpointWidget = "end.gif"
var widgetWidth = 12
var widgetHeight = 12

// Target for documents loaded when user clicks on a link.
// Specify your target frame name here.
var displayTarget = "Frame2"

// Create array object containing outline content and attributes.
// To adapt outline for your use, modify this table.
// Start the array with [1], and continue without gaps to your last item.
// The order of the five parameters:
//    1. Boolean (true or false) whether _next_ item is indented.
//    2. String to display in outline entry (including <FONT> or style tags).
//    3. URL of link for outline entry; Use empty string ("") for no link
//    4. Integer of indentation level (0 is leftmost margin level)
//    5. String for status line during onMouseOver (apostrophes require \\')
var db = new Array()
db[1] = new dbRecord(true,  "Peas",      "",0,"")
db[2] = new dbRecord(false, "Boiled",    "foods.htm#boiled",1,"Mmm, boiled peas...")
db[3] = new dbRecord(true,  "Canned",    "foods.htm#canned",1,"Check out canned peas...")
db[4] = new dbRecord(false, "Alaska",    "foods.htm#alaska",2,"Alaska\\'s finest...")
db[5] = new dbRecord(false, "Low-Sodium","foods.htm#losodium",2,"A healthy treat...")
db[6] = new dbRecord(true,  "<FONT COLOR=red SIZE=+2>Pickles</FONT>",   "",0,"")
db[7] = new dbRecord(true,  "Cucumber",  "foods.htm#cucumber",1,"What\\'s new in cukes...")
db[8] = new dbRecord(false, "Dill",      "foods.htm#dill",2,"Pucker up...")
db[9] = new dbRecord(false, "Fresh",     "foods.htm#fresh",2,"You\\'d prefer stale?")
db[10] = new dbRecord(false,"Sour",      "foods.htm#sour",2,"For sweeties...")
// add more records to complete your outline

// object constructor for each outline entry
function dbRecord(mother,display,URL,indent,statusMsg){
        this.mother = mother   // is this item a parent?
        this.display = display // text to display
        this.URL = URL         // link tied to text; if empty string, item appears as straight text
        this.indent = indent   // how many levels nested?
        this.statusMsg = statusMsg  // descriptive text for status bar
        return this

// pre-load all images into cache
var fillerImg = new Image(1,1)
fillerImg.src = "filler.gif"
var collapsedImg = new Image(widgetWidth,widgetHeight)
collapsedImg.src = collapsedWidget
var expandedImg = new Image(widgetWidth,widgetHeight)
expandedImg.src = expandedWidget
var endpointImg = new Image(widgetWidth,widgetHeight)
endpointImg.src = endpointWidget

// ** functions that get and set persistent cookie data **
// set cookie data
var mycookie = document.cookie
function setCurrState(setting) {
        mycookie = document.cookie = "currState=" + escape(setting)
// retrieve cookie data
function getCurrState() {
        var label = "currState="
        var labelLen = label.length
        var cLen = mycookie.length
        var i = 0
        while (i < cLen) {
                var j = i + labelLen
                if (mycookie.substring(i,j) == label) {
                        var cEnd = mycookie.indexOf(";",j)
                        if (cEnd ==     -1) {
                                cEnd = mycookie.length
                        return unescape(mycookie.substring(j,cEnd))
        return ""

// **function that updates persistent storage of state**
// toggles an outline mother entry, storing new value in the cookie
function toggle(n) {
        if (n != 0) {
                var newString = ""
                var currState = getCurrState() // of whole outline
                var expanded = currState.charAt(n-1) // of clicked item
                newString += currState.substring(0,n-1)
                newString += expanded ^ 1 // Bitwise XOR clicked item
                newString += currState.substring(n,currState.length)
                setCurrState(newString) // write new state back to cookie

// **functions used in assembling updated outline**
// returns the proper GIF file name for each entry's control
function getGIF(n) {
        var mom = db[n].mother  // is entry a parent?
        var expanded = getCurrState().charAt(n-1) // of clicked item
        if (!mom) {
                return endpointWidget
        } else {
                if (expanded == 1) {
                        return expandedWidget
        return collapsedWidget

// returns the proper status line text based on the icon style
function getGIFStatus(n) {
        var mom = db[n].mother  // is entry a parent
        var expanded = getCurrState().charAt(n-1) // of rolled item
        if (!mom) {
                return "No further items"
        } else {
                if (expanded == 1) {
                        return "Click to collapse nested items"
        return "Click to expand nested items"

// initialize 'current state' storage field
if (getCurrState() == "" || getCurrState().length != (db.length-1)) {
        initState = ""
        for (i = 1; i < db.length; i++) {
                initState += "0"

// end -->


<CENTER><H3>Composition of Selected Foods</H3><HR></CENTER><IMG SRC="filler.gif" HEIGHT = 1 WIDTH =0><A HREF="javascript:history.go(0)" onMouseOver="window.status='Click to expand nested items';return true;" onClick="toggle(1);return true"><IMG SRC="plus.gif" HEIGHT=12 WIDTH=12 BORDER=0></A> Peas<BR><IMG SRC="filler.gif" HEIGHT = 1 WIDTH =0><A HREF="javascript:history.go(0)" onMouseOver="window.status='Click to expand nested items';return true;" onClick="toggle(6);return true"><IMG SRC="plus.gif" HEIGHT=12 WIDTH=12 BORDER=0></A> <FONT COLOR=red SIZE=+2>Pickles</FONT><BR>


Author Comment

ID: 1844572
I'll check this out, thanks.

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question