Automatic TOC Line Highlighting in the JavaScript Implementation of WebWorks Help 3.0

As you browse a document in the Java implementation of WebWorks Help 3.0, the Contents frame highlights the line corresponding to what page you're on, to indicate where you are in the book. The JavaScript implementation does not have this feature as installed, but you can customize the template to add this behavior.

To replicate this, you need to modify three files under your template's Support directory:

If you've made no other changes to these files, you can simply use the links above to download each file and save it over your local copy. To make the changes in your own files, see below.

Tip: This modification highlights the target TOC line when you sync the TOC. In the default template, this happens only when you click the Sync TOC button. For best results, you should have each content page sync the TOC automatically, and remove the Sync TOC button.

In outline.js:

Add this property to the WWHOutline_object constructor function at the top of the file (other lines shown for context):

  this.mSyncFileHREF      = null;
  this.mImagingObject     = (bUseSafeMethods) ? new WWHOutlineImagingSafe_Object() : new WWHOutlineImagingFast_Object();
  this.mLastRevealedEntry = null;

  this.fInitHeadHTML       = WWHOutline_InitHeadHTML;
  this.fInitBodyHTML       = WWHOutline_InitBodyHTML;

In outlfast.js:

  1. Edit the WWHOutlineImagingFast_DisplayEntry function as shown below:

    function  WWHOutlineImagingFast_DisplayEntry(ParamEntry)
    {
      var  EntryHTML = "";
      var  IconURL = this.fGetIconURL(ParamEntry);
    
      // Highlight this entry, if it corresponds to what's showing in the content frame.
      var TOCHighlightStart = "";
      var TOCHighlightEnd   = "";
      if (WWHFrame.WWHOutline.mPanelAnchor == "t" + ParamEntry.mID) {
        TOCHighlightStart = "<b>";
        TOCHighlightEnd   = "</b>";
      }
    
      if (ParamEntry.mChildren == null)
      {
        EntryHTML += "<nobr>";
        EntryHTML += TOCHighlightStart;
        EntryHTML += this.fGetLink(ParamEntry, "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"> ");
        EntryHTML += TOCHighlightEnd;
        EntryHTML += "</nobr>\n";
      }
      else
      {
        if (ParamEntry.mbExpanded)
        {
          EntryHTML += "<nobr>";
          EntryHTML += TOCHighlightStart;
          EntryHTML += "<a href=\"javascript:fC(" + ParamEntry.mID + ");\" " + this.fGetPopupAction(ParamEntry) + ">";
          EntryHTML += "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"></a>";
          EntryHTML += " " + this.fGetLink(ParamEntry, null);
          EntryHTML += TOCHighlightEnd;
          EntryHTML += "</nobr>\n";
        }
        else
        {
          EntryHTML += "<nobr>";
          EntryHTML += TOCHighlightStart;
          EntryHTML += "<a href=\"javascript:fE(" + ParamEntry.mID + ");\" " + this.fGetPopupAction(ParamEntry) + ">";
          EntryHTML += "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"></a>";
          EntryHTML += " " + this.fGetLink(ParamEntry, null);
          EntryHTML += TOCHighlightEnd;
          EntryHTML += "</nobr>\n";
        }
      }
    
      return EntryHTML;
    }
  2. Edit the WWHOutlineImagingFast_RevealEntry function as shown below:

    function  WWHOutlineImagingFast_RevealEntry(ParamEntry,
                                                bParamVisible)
    {
      var  ParentEntry;
      var  LastClosedParentEntry = null;
    
      // If the last entry we bolded is still visible, update it so that it returns to normal.
      if (WWHOutline.mLastRevealedEntry != null) {
        lastHref = "javascript:fD(" + WWHOutline.mLastRevealedEntry.mID + ")\;";
        for (l = 0; l < WWHFrame.WWHNavigationFrame.WWHPanelFrame.document.links.length; l++) {
          if (WWHFrame.WWHNavigationFrame.WWHPanelFrame.document.links[l].href == lastHref) {
            this.fUpdateEntry(WWHOutline.mLastRevealedEntry);
          }
        }
      }
    
      // Expand out enclosing entries
      //
      ParentEntry = ParamEntry.mParent;
      while (ParentEntry != null)
      {
        if ( ! ParentEntry.mbExpanded)
        {
          ParentEntry.mbExpanded = true;
          LastClosedParentEntry = ParentEntry;
        }
    
        ParentEntry = ParentEntry.mParent;
      }
    
      // Set target entry
      //
      WWHFrame.WWHOutline.mPanelAnchor = "t" + ParamEntry.mID;
    
      // Update display
      //
      if (bParamVisible)
      {
        // Expand parent entry to reveal target entry
        //
        if (LastClosedParentEntry != null)
        {
          this.fUpdateEntry(LastClosedParentEntry);
        } else {
          this.fUpdateEntry(ParamEntry);
        }
    
        // Display target
        // 
        WWHFrame.WWHJavaScript.mPanels.fJumpToAnchor();
      }
      // Store this entry so we can un-bold it with the next reveal.
      WWHOutline.mLastRevealedEntry = ParamEntry;
    }

In outlsafe.js:

  1. Edit the WWHOutlineImagingSafe_DisplayEntry function as shown below:

    function  WWHOutlineImagingSafe_DisplayEntry(ParamEntry)
    {
      var  EntryHTML = "";
      var  IconURL = this.fGetIconURL(ParamEntry);
    
      // Hilight this entry, if it corresponds to what's showing in the content frame.
      var TOCHighlightStart = "";
      var TOCHighlightEnd   = "";
      if (WWHFrame.WWHOutline.mPanelAnchor == "t" + ParamEntry.mID) {
        TOCHighlightStart = "<b>";
        TOCHighlightEnd   = "</b>";
      }
    
      if (ParamEntry.mChildren == null)
      {
        EntryHTML += "<p class=\"l" + ParamEntry.mLevel + "\">";
        EntryHTML += "<nobr>";
        EntryHTML += TOCHighlightStart;
        EntryHTML += this.fGetLink(ParamEntry, "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"> ");
        EntryHTML += TOCHighlightEnd;
        EntryHTML += "</nobr>";
        EntryHTML += "</p>\n";
      }
      else
      {
        if (ParamEntry.mbExpanded)
        {
          EntryHTML += "<p class=\"l" + ParamEntry.mLevel + "\">";
          EntryHTML += "<nobr>";
          EntryHTML += TOCHighlightStart;
          EntryHTML += "<a href=\"javascript:fC(" + ParamEntry.mID + ");\" " + this.fGetPopupAction(ParamEntry) + ">";
          EntryHTML += "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"></a>";
          EntryHTML += " " + this.fGetLink(ParamEntry, null);
          EntryHTML += TOCHighlightEnd;
          EntryHTML += "</nobr>";
          EntryHTML += "</p>\n";
        }
        else
        {
          EntryHTML += "<p class=\"l" + ParamEntry.mLevel + "\">";
          EntryHTML += "<nobr>";
          EntryHTML += TOCHighlightStart;
          EntryHTML += "<a href=\"javascript:fE(" + ParamEntry.mID + ");\" " + this.fGetPopupAction(ParamEntry) + ">";
          EntryHTML += "<img width=\"17\" height=\"17\" border=\"0\" src=\"" + IconURL + "\"></a>";
          EntryHTML += " " + this.fGetLink(ParamEntry, null);
          EntryHTML += TOCHighlightEnd;
          EntryHTML += "</nobr>";
          EntryHTML += "</p>\n";
        }
      }
    
      return EntryHTML;
    }
  2. Edit the WWHOutlineImagingSafe_RevealEntry function as shown below:

    function  WWHOutlineImagingSafe_RevealEntry(ParamEntry,
                                                bParamVisible)
    {
      var  ParentEntry;
      var  LastClosedParentEntry = null;
    
      // If the last entry we bolded is still visible, update it so that it returns to normal.
      if (WWHOutline.mLastRevealedEntry != null) {
        lastHref = "javascript:fD(" + WWHOutline.mLastRevealedEntry.mID + ")\;";
        for (l = 0; l < WWHFrame.WWHNavigationFrame.WWHPanelFrame.document.links.length; l++) {
          if (WWHFrame.WWHNavigationFrame.WWHPanelFrame.document.links[l].href == lastHref) {
            this.fUpdateEntry(WWHOutline.mLastRevealedEntry);
          }
        }
      }
    
      // Expand out enclosing entries
      //
      ParentEntry = ParamEntry.mParent;
      while (ParentEntry != null)
      {
        if ( ! ParentEntry.mbExpanded)
        {
          ParentEntry.mbExpanded = true;
          LastClosedParentEntry = ParentEntry;
        }
    
        ParentEntry = ParentEntry.mParent;
      }
    
      // Set target entry
      //
      WWHFrame.WWHOutline.mPanelAnchor = "t" + ParamEntry.mID;
    
      // Update display
      //
      if (bParamVisible)
      {
        // Update display if entry not already visible
        //
        if (LastClosedParentEntry != null)
        {
          this.fUpdateEntry(ParamEntry);
        }
    
        // Display target
        //
        WWHFrame.WWHJavaScript.mPanels.fJumpToAnchor();
      }
      // Store this entry so we can un-bold it with the next reveal.
      WWHOutline.mLastRevealedEntry = ParamEntry;
    }


© 2003 The Doc Side™. All Rights Reserved.