Dynamic Ouline Lists

Hi, I've created a dynamic Ouline list with Frontpage which is working well.

The question is, how do I get the list to be collapsed when the form is first showed?

Thnx
LVL 2
VerolandAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
wistexConnect With a Mentor Commented:
By default, collapsible outlines appear fully expanded in the browser, which seems to defeat their purpose. In fact, many users of FrontPage 98 have avoided using collapsible lists for this reason. FrontPage 2000 eliminates this problem. In the List Properties dialog box for your top-level list, you'll find an Initially Collapsed check box. By enabling this check box, you can tell FrontPage to always show the list collapsed.

---------------------------------------
Creating Outlines That are Collapsed By Default in FrontPage 98

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


In HTML view, add onLoad="CollapseAll()" to the line that reads <body onclick="dynOutline()">.

The line should now read:
      <body onclick="dynOutline()" onLoad="CollapseAll()">



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>



---------------------------------------
or here is another version:


A collapsible outline fix

By default, collapsible outlines appear fully expanded in the browser, which seems to defeat their purpose. In fact, many users of FrontPage 98 have avoided using collapsible lists for this reason. FrontPage 2000 eliminates this problem. In the List Properties dialog box for your top-level list, you'll find an Initially Collapsed check box. By enabling this check box, you can tell FrontPage to always show the list collapsed.

If you're using FrontPage 98, you can start your lists collapsed by making two modifications to your page's HTML code. Return to FrontPage Editor and click on the HTML tab to switch to HTML view. Add the code in Listing A just before the following line:

<script LANGUAGE="JavaScript" FPTYPE="dynamicoutline">

Next, scroll down to the <body> tag and modify it to look like this:

<body onclick="dynOutline()" onload="dynCollapse()">

We've indicated in color the code you need to add. Save your page again and preview it in the browser. This time, the outline will appear completely collapsed when the page opens.

Listing A: Collapsed outlines function

 
<script language="JavaScript">
<!--
function dynCollapse(){
var offset
for(offset=0; offset<document.all.length; offset++){
var tag = document.all(offset).tagName;
if("OL" == tag || "UL" == tag){
var el = document.all(offset)
if(null != el.getAttribute("dynamicoutline",false) &&
null
!=el.parentElement.parentElement.getAttribute("dynamicoutline",false)
&&
=>("dynamicoutline",false) &&
"LI" != el.parentElement.parentElement.parentElement.tagName){
document.all(offset).style.display = "none";
}
}
}
}
-->
</script>
0
 
TTomCommented:
Can you quickly tell me (us) how you created the list?  I'm not familiar enough with FP to know how it creates dynamic outline lists off the top of my head.

Most of the outline lists I have seen use JavaScript, and, by looking at the code, you can determine a method of collapsing the list.

Tom
0
 
VerolandAuthor Commented:
Yep, it uses JScript. I thought about calling the collapse function, but how do I pass to the function which control the click occored on?
0
 
NickRackhamCommented:
Can you post the code here so that we can advise better.
0
 
VerolandAuthor Commented:
Thanks
0
All Courses

From novice to tech pro — start learning today.