Solved

DHTML

Posted on 1998-07-06
2
269 Views
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:
http://home1.gte.net/mvmmvm/bor/sitemap.html

thanks
0
Comment
Question by:jkelly061597
2 Comments
 
LVL 4

Accepted Solution

by:
jbrugman earned 50 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...

<!--
    -------------------------------------------------------------------------
                OUTLINE STYLE TABLE OF CONTENTS in JAVASCRIPT
                                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
-->
<HTML>
<HEAD>
<TITLE>Food Selection Outline</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">

<!-- begin hiding
// ** BEGIN OUTLINE AUTHOR-ADUSTABLE SPECIFICATIONS **//

// 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
// ** END AUTHOR-ADJUSTABLE SPECIFICATIONS **//

// 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))
                }
                i++
        }
        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"
        }
        setCurrState(initState)
}

// end -->

</SCRIPT>
</HEAD>

<BODY>
<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>
</BODY>
</HTML>

0
 

Author Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
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.

895 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now