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



Creating Dynamic Pages for all browsers requires client-side refreshing of the page.

 

Reviewing the Code

This page includes the complete set of functions necessary to generate the outline. This script needs to be included or referenced by the frame that contains your outline:

  <SCRIPT LANGUAGE="JavaScript">
    <!-- 
    /* This code may be reused as long as the following copyright notice 
       is not removed:
       Copyright 1997 by Scott Isaacs - http://www.insideDHTML.com */

    // Reference the target frame for any navigations
    var targetURL = parent.DEMO

    // Data Structure for the outline
    var outline = new Array()

    function addOutline(name, parentID, children) {
      // Data Structure for each item in the outline 
      var idx = outline.length
      outline[idx] = new Object 
      outline[idx].name = name // The text to display 
      outline[idx].parent = parentID // The ID of the parent item 
      outline[idx].children = children // Boolean if the item has any children 
      outline[idx].url = arguments[3] // The URL if one is specified, otherwise null 
    }

    function spaceIt(amount, what) {
      // Returns a string with the character "what" repeated "amount" times 
      var str=""
      for (i = 0; i < amount; i++)
        str+=what
      return str
    }

    function outputOutline() {
      // Generate the HTML for the outline
      var cnt = 0, expanded = false;
      var p = -1, level = 0
      /* Store the state of the outline in the parent FRAMESET document.
         If this is the first time the function is called, initialize the state. */
      if (parent.expand==null)
        parent.expand = spaceIt(outline.length,"0")
      // Enumerate each item in the outline
      for (var item in outline) {
        outline[item].index = cnt
        var a = ""
        ok = true
        var str = parent.expand
        p = outline[item].parent
        level = 0
        if (p!=-1) {
          temp = p         
          // Determine level's deep and whether to display the item
          while (temp!=-1) {
            if (str.substring(outline[temp].index,outline[temp].index+1)=="0")
              ok = false
            level++
            temp = outline[temp].parent
          }
        }

        if (ok) {
          // Build the HTML for the item
          if (p!=-1)
            a+="<FONT FACE=verdana SIZE=-1>" + spaceIt(level," ")
          if ((outline[item].children) || (outline[item].url!=null)) {
            a += "<A NAME="+cnt+" ONCLICK='return doOutline(this)'"
            a+=" href="+cnt
            a+=">"
          }
          if (p==-1) 
            a+="<FONT face=arial COLOR=LIGHTGREEN>"
          a += outline[item].name
          if ((outline[item].children) || (outline[item].url!=null))
            a += "</A>"
          a += "</FONT><BR>"
          document.write(a)
        }
        
        cnt++
      }
    }

    function doOutline(a) {
      // User clicked on an item in the outline
      // Get the index of the item 
      var idx = parseInt(a.href.substring(a.href.lastIndexOf("/")+1));
      // Navigate to the URL if one is specified
      if (outline[idx].url!=null)
        targetURL.location = outline[idx].url
      if (outline[idx].children) {
        var state= parent.expand.substring(idx,idx+1) == "1" ? "0" : "1"
        parent.expand = parent.expand.substring(0,idx) + state + parent.expand.substring(idx+1)
        // // Open and Close required to work around a change in Netscape 4.04
        document.open()
        document.close()
        location.reload()
        // Scroll to the item 
        location.hash = idx
      }
      return false;
    }

    // Define the sample outline
    addOutline("Inside DHTML",-1,true)
    addOutline("Features",0,true)
    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)
    addOutline("Developers Paradise", 0, true)
    addOutline("Positioning Library", 7, false)
    addOutline("Inside Techniques", 7, false)
    addOutline("Inside Scriptlets", 7, false)
    addOutline("DHTML Toolkits", 7, false)
    addOutline("Site Information",0,true)
    addOutline("About InsideDHTML", 12, false)
    addOutline("Trophy Room", 12, false)

    // -->
  </SCRIPT>