www.insideDHTML.com
Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/Outline Everywhere/

Outline Everywhere

Introduction
Building an Outline
Reviewing the Code


Create an outline inside of a frame that runs in Netscape and Internet Explorer.

 

Building an Outline

If you were to view the code in the menu pane, you would discover that the outline contents are being generated entirely through script. By generating the contents through script, we can control what items are being output.

Using Dynamic HTML and Internet Explorer 4.0, the outline can be created using standard HTML and does not need to be generated from script. Using Dynamic HTML, the outline contents can be dynamically hidden and displayed without refreshing the entire page. See The Outline Toolkit for more information on how to create Dynamic HTML outlines for Internet Explorer 4.0.

We will now walk you through the following four steps for creating an outline:

  1. Use the addOutline() function to add items to the outline.
  2. Call the outputOutline() function at the place in your HTML document where you want the outline displayed.
  3. Modify the variable that specifies the destination target for URL's.
  4. Include the outline script on your page or in an external library.

Building the Outline
You need to call the addOutline() method once for each item in the outline. Below demonstrates how we created the outline: 

    // Define the outline

    addOutline("Inside DHTML",-1,true)
    addOutline("Features",0,true)

    // The parent for the following is "Features" at index 1
    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)

    // The parent for the following is "Inside DHTML" at index 0
    addOutline("Developers Paradise", 0, true)

    // The parent for the following is "Developer's Paradise" at index 7
    addOutline("Positioning Library", 7, false)
    addOutline("Inside Techniques", 7, false)
    addOutline("Inside Scriptlets", 7, false)
    addOutline("DHTML Toolkits", 7, false)

    // The parent for the following is "Inside DHTML" at index 0
    addOutline("Site Information",0,true)

    // The parent for the following is "Inside "Site Information" at index 12
    addOutline("About InsideDHTML", 12, false)
    addOutline("Trophy Room", 12, false)

The addOutline() function used to add items to the outline has 4 arguments: 

    addOutline(Title,ParentIndex, Expandable, [URL])
 TitleThe text to display for the item.
 ParentIndex The index of the parent of the item. The first item must always have an index of -1. The items in the outline are indexed starting at 0 and going to the number of items in the list less 1. The index of the item is determined by the order the addOutline function is called. Therefore, the first item above, Inside DHTML, is at index 0.
 Expandable A boolean that indicates whether the current item can be expanded to display children.
 URL If this argument is specified, it specifies the URL to navigate to when the user clicks on an item. An item can both navigate to a page and expand to display children.

Outputting the Outline
Calling addOutline() builds the data structures that stores the outline information. However, the outline is not rendered into the page until the outputOutline() function is called. You need to add a short script within the BODY of your page that designates where you want the outline displayed: 

    <SCRIPT LANGUAGE="JavaScript">
      outputOutline() // Output the outline here
    </SCRIPT>

Defining a Target Frame
In the library is a variable that specifies the target frame for any navigation. This target frame must reference another frame or window. You should update this variable to point to a frame in your frameset document.

For example, the frameset that defines the user interface for this page is as follows: 

    <FRAMESET COLS="250,*">
      <FRAME SRC="menu.htm" NORESIZE>
      <FRAME SRC="page2.htm" NAME=DEMO>
    </FRAMESET>

The frame displaying this document is named DEMO. If I were to add any items to the outline that display documents, I would want them displayed in this frame. Therefore, in the outline code, I set the targetURL variable to reference this frame as follows: 

    var targetURL = parent.DEMO  // Frame names are case sensitive

In the next page, we provide the complete JavaScript source for defining outlines.

www.insideDHTML.com
© 1997 by Scott Isaacs