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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 save .Dat to server side 20 50
Decoding Special HTML Characters using Javascript? 2 36
Html test in IIS 4 22
How to create a textarea which saves text in HTML 8 44
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

789 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