How to Use Collapsible Outlines in FrontPage

Creating Collapsible Outlines Without a Pre-Existing Outline
To Create Collapsible Outlines from an Existing Outline
Creating Outlines That are Collapsed By Default
Collapsible Outlines in Shared Borders

Internet Explorer version 4.0 or above is required in order for this to work correctly. Include text links for other browsers & disabled viewers.

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.

NOTE: Here is a collapsible Outline working with FrontPage 98 code

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 the page is first viewed, follow these steps:

1. Open the page that contains the collapsible outline.
2. In HTML view after the </head> add

onLoad="CollapseAll()"

to the line that reads <body onclick="dynOutline()"> The line should now read:

3. Position your pointer below the line you typed in the preceding step

and insert the following code:

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>

4. FrontPage inserts the following into the default collapsible outline script, you must also follow the steps below for this to work. If you find it hard to locate the sections of script to change, use Edit >> Replace.

If you want to change this script, you must also make the following changes so that FrontPage will not overwrite your new script.

// In the script tag, change type="dynamicoutline" to type="mydynamicoutline"

// In function dynOutlineEnabled, change "dynamicoutline" to "mydynamicoutline"

// Throughout the HTML content, change dynamicoutline to mydynamicoutline

// Change function dynOutline to function mydynOutline in the script

// In the body tag, change onclick="dynOutline()" to onclick="mydynOutline()"

Note: You have to follow the steps above very carefully. To see the above script in action look Here

Collapsible Outlines in Shared Borders!

1.    Goto FrontPage Explorer
2.    Goto Folder View
3.    Open Borders Folder
4.    Open Left.htm
5.    Goto html View

To make sure your borders folders are viewable

Goto FrontPage Explorer, Tools, Web Settings, Advanced Tab and select under Options 'show documents in hidden directories'

Follow Procedures for 'How to Use Collapsible Outlines in FrontPage' (above)
First creating your collapsible outline and then inserting the code in the html view.

NOTE:...The secret to making this whole thing work on EACH page is that you MUST have a BULLETED LIST within each INDIVIDUAL PAGE...Just one bullet will do also included the code as per 'How to Use Collapsible Outlines in FrontPage'

Save the left.htm page
Goto any other page and click in the left border to bring the outline up.

There is one problem with this and that is the default setting on the tab indent...it is too long for an outline like this but the indent is needed to create the bulleted list. What I would like to know is how to change the default length on the indent then we would have a really good list...However please note that this will not view in all browsers so include text links at the bottom of the page.

Expandable Outlines Cross-Browser

This site addresses the problems but produces errors when you view the site so I don't know if they are coding correctly, and it does not address IE5...I don't understand this enough, but for those of you who can code you should be able to address the cross-browser issues and the indent problem...Please get in touch with me if you feel like making a tutorial so that we can all use it!

NOTE: You can do the above quite easily in FrontPage 2000 and using style sheets you can manipulate the indent on the bullets, but this has to be fine tuned if anyone has managed this please let me know for a forthcoming FP2k tutorial.