FP98: How to Use Collapsible Outlines in FrontPage

MORE INFORMATION

There are several ways to create Collapsible Outlines in FrontPage 98. This functionality requires Internet Explorer version 4.0 in order to function correctly.

When you browse a page that contains collapsible outlines, all levels appear expanded. You can then collapse each level accordingly. To create a collapsed outline follow the steps mentioned at the end of this article.

Creating Collapsible Outlines Without a Pre-Existing Outline

In Themes View of FrontPage Explorer, apply a theme to the Web you are currently working in. This will use graphic images from the theme as your outline level icons.

Create the First Outline Level:

1. In FrontPage Editor, type a single line of text.
2. Highlight the line of text you typed in step 1.
3. On the Format menu, click Bullets And Numbering.
4. In the Bullets And Numbering dialog box, click the Image Bullets tab, and then click "Use images from current theme."
5. Click to select the Enable Collapsible Outlines check box.

Create Subsequent Levels:

1. In FrontPage Editor, position the insertion point at the end of the first level outline text.
2. Press Enter.
3. On the Formatting toolbar, click the Increase Indent button twice.
   
   This creates a second level with a new graphic image to the left of the line.
4. Repeat steps 2 and 3 for each subsequent outline level you want to create.

To Create Collapsible Outlines from an Existing Outline

Use one of the following methods to create Collapsible Outlines.

Method 1:

1. In FrontPage Editor, highlight the first line of the existing outline structure.
   
   NOTE: The other levels will inherit these properties.
2. On the Format menu, click Bullets And Numbering.
3. In the Bullets and Numbering dialog box, click the Image Bullets tab, and then click "Use images from current theme."
4. Click to select the Enable Collapsible Outlines check box.

Method 2:

1. In FrontPage Editor, double-click to the left of the first level in the existing outline structure.
   
   The entire outline becomes highlighted, and the highlighted section extends the entire width of the page.
2. On the Format menu, click Bullets And Numbering.
3. In the Bullets And Numbering dialog box, click the Image Bullets tab, and then click "Use images from current theme."
4. Click to select the Enable Collapsible Outlines check box.

NOTE: When you use Themes, you will only see three different levels of icons on your outline. After that, the icon used for the third level is repeated for each subsequent level.

Creating Outlines That are Collapsed By Default

If you would like your outline to be collapsed when a the page is first viewed, follow these steps:

1. Open the page that contains the collapsible outline.
2. In HTML view, add onLoad="CollapseAll()" to the line that reads <body onclick="dynOutline()">.
   
   The line should now read:

         <body onclick="dynOutline()" onLoad="CollapseAll()">
   						

3. Position your pointer below the line you typed in the preceeding step and insert the following code:

   <script LANGUAGE="JavaScript">
   <!--
   /* name the function so you have something you can call it with later
   make it so it accepts an input argument */ 
   function isCollapsible(rElem)
   {
      /* use the input argument to find the tagname, pass that to the variable
   "tag" */ 
      tag = rElem.tagName;
      /* analyze the tagname and if it is a list or a table return true */ 
      if ("UL" == tag || "OL" == tag || "TABLE" == tag)
      return true;
      /* otherwise return false */ 
      return false;
   }
   
   /* name the function so it can be called later */ 
   function CollapseAll()
   {
      /* create a variable ms which searches the browser version looking for
   the letters MSIE */ 
     var ms = navigator.appVersion.indexOf("MSIE");
      /* create a variable ie4 which is only TRUE if ms > 0 ( MSIE was in the
   browser version) and the 5th through 6th characters of the browser version
   were the number 4 or higher */ 
     ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >=
   4);
      /* if ie4 is not true then exit the function */ 
       if(!ie4)
         return;
      /* create two variables, one iElem to act as a counter, and the second
   lDocLength that will equal the number of HTML tags in the entire document
   */ 
     var iElem = 0, lDocLength = document.all.length;
      /* use the two variables you created above to start a loop from 0 that
   loops as long as iElem number is less than the number of tags in the
   document and which adds 1 to the iElem counter each successful loop */ 
     for (iElem = 0; iElem < lDocLength; iElem++)
       {
      /* create a new variable to hold the current tag*/ 
       var rElem = document.all[iElem];
       /* Use the DHTML method getAttribute. If the tag does not have the
   attribute of not having a dynamic outline (if it does have a dynamic
   outline attribute) and it is collapsible (a list or a table ) then... */ 
         if (null != rElem.getAttribute("dynamicoutline", false) &&
         isCollapsible(rElem))
           {
         /* create a new variable that checks the tag immediately after the
   iLem tag, incrementing the iElem counter at the same time */ 
           var rInnerElem = document.all[++iElem];
         /* create a new loop that runs as long as the current tag is before
   the last  tag in the document and contained within the list or table */ 
           for (; iElem < lDocLength && containedIn(rInnerElem, rElem);
         /* move on to the next tag within the document */ 
           rInnerElem = document.all[++iElem])
             {
         /* find out if the current item is a list or table */ 
             if (isCollapsible(rInnerElem))
               {
         /* set up a variable to hold the parent element ( a DHTML feature
   ithin IE)  of the current tag */ 
                var rCtrl = rInnerElem.parentElement;
         /* as long as the parent element is not collabsible */ 
                while (rCtrl && !isCollapsible(rCtrl))
         /* evaluate the parent element of the parent element */ 
                rCtrl = rCtrl.parentElement;
            /* if the parent element is still valid and is within the list or
   table then ...*/ 
                  if (rCtrl && rCtrl == rElem)
            /* the tag you found at the beginning of this loop (the one
   immediately after the tag which had a dynamic outline applied to it) will
   not be displayed when the page is first loaded. */ 
   rInnerElem.style.display="none";
               }
             }
           }
         }
   }
   //-->
   </script>