Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium



Posted on 1998-07-06
Medium Priority
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 150 total points
ID: 1844571
There is an example for this on the site of danny goodman.
Look at www.dannyg.com
Good luck

PS. I downloaded it for you...

                                Version 2.0
                    by Danny Goodman (dannyg@dannyg.com)
                    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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

571 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