SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Resource

Cross Browser Expanding and Collapsing Table of Contents Menu V. 2.

Categories...
Client User Group
Write Once!
Language
JavaScript
Product
IE4, IE5, NS4
Task
Cross-Browser DHTML, Layout Enhancement, Menus/ Popups, Outlining, Utilities
Technology
ECMA-262

Sponsored Links
Developer's Paradise : Inside Technique :
Cross Browser Expanding and Collapsing Table of Contents Menu V. 2.
Submission by SiteExperts Staff

Go to the resource:
Cross Browser Expanding and Collapsing Table of Contents Menu V. 2.

Add to Assistant

Short Description
An improved Cross Browser Expanding and Collapsing Table of Contents Menu for IE4/NS4 and later.

Long Description
This paper describes how you can easy build up an expanding and collapsing ToC menu by using a technique that is based on JavaScript and works with Internet Explorer and Netscape Navigator as well. Furthermore, we show how you can easy number the headings of your document and generate the ToC menu automatically.

Updated with bug fixes and more features.

Author
Dieter Bungers
Date/ Version
8/9/2000
Submission URL
http://www.SiteExperts.com/tips/techniques/ts03/index.htm
Submission Date
Aug 9,2000
Last Update
Aug 9,2000
 

Discussion and Rate this Resource
Overall Rating: 4.3

mszlazak on Feb 10, 2002 at 12:10:53 AMRating: 4

Good job! I noticed that your expand / collapse / leaf-node images aren't appearing in Opera 6 and probably earlier versions as well. Often times Opera will need absolute paths to image files to appear or stop from disappearing with things like dynamic re-writes or window resizes when images are inside positioned elements.

Writing in a <base> tag at the begining of the dynamically generated toc HTML solves the problem .

 document.write('<base href="' + path + '">');

The "path" can be hardcode or can be derived by script.

loc = location.href;
((end = loc.lastIndexOf("/")) > 0)? path = loc.substring(0, end+1) : path = "";

I hope this works :-)

hsin on Jan 15, 2002 at 2:54:59 AMRating: 4
good
broFECES on Jan 4, 2002 at 2:54:42 PMNo Rating

just an observation:

why do you bother testing anything in nav 4.x? the longer you care about doing such things, the longer those abominable browsers will be around. i'm actually a bit dissappointed that the maker of this ToC made it work in nav4.x. 

bod1467 on Jan 3, 2002 at 7:05:28 AMRating: 4

Nice. Two comments though ...

1/ How easy is this to integrate into a non-frameset page?

2/ When you use the CTRL key to expand more than one menu, then collapse one of the menus WITHOUT the CTRL key, the they ALL collapse.

These are minor quibbles though.

SiteGuru.

roadster on Jan 3, 2002 at 3:58:23 AMRating: 5
very good
cgisackson on Jan 2, 2002 at 6:36:01 AMRating: 5
OK!  This is nearing the tenth time we've seen someone's version of the collapsing TOC.  Let's give it a rest!
cvcalhoun on Jan 1, 2002 at 10:48:52 AMNo Rating
broadwayrichard
Interesting. It's working fine for me in Netscape 4.79. I try to test things in each major version of each browser, but I'm not sure how to manage things that work in one subversion and not another.
broadwayrichard on Dec 7, 2001 at 8:23:16 AMNo Rating

cvcalhoun,

I tried your example in NS4.08 and it doesn't work. The page refreshes about 4 times and when it's done the entire menu structure is rendered out in bullet form with no links (and no open, close folder images either). However those folder images do appear only momentarily during the refresh sequences.

The page works fine in everything else I've tried.

abenoni on Dec 6, 2001 at 1:10:37 AMRating: 5
My mistake I guess. I suddenly got this to work in a massive frameset. Very nice and so good documented and tweekable!
JerryNixon on Dec 5, 2001 at 12:12:17 PMRating: 4
beautiful
cvcalhoun on Nov 26, 2001 at 12:15:20 PMRating: 4
Hmm, don't quite understand why everyone is having such trouble.  First off, I just copied the code from the site, and it already had the "Top" in the Javascript.  And I just checked it a moment ago, and the second line of tocTab.js, in the zip file downloaded from the site, is

tocTab[ir++] = new Array ("Top", "Cross Browser Expanding and Collapsing Table of Contents Menu", "TocMenu_0.htm#Top");

Thus, the line for "Top" is already included.  If you use that same line (substituting the title of your page for his), it works.  In fact, I even got it to work in the main frame of the page (as a site map), rather than in the table of contents frame.  See http://benefitsattorney.com/sitemap.html .  (I changes his plus, minus, and leaf images to closed folder, open folder, and page images, so it looks a bit different, but it is the same script.

My only complaint about it is that it seems a bit slow for a table of contents.  I'm therefore using a different script for my toc, and using this one only in the site map.

 

cgisackson on Nov 14, 2001 at 6:37:42 AMRating: 1

I know lots of you would like to use this and with some minor fixes to the source files, you can trick the displayToc.js file into performing as advertised.  If I have to fix code and source like this, the ratings need to be pretty low.

In order to make the tocTab.js work with the generated HTML, you need to replace the first array element 0 with top.  This is because displayToc.js does not work with the generated source HTML.  So this should be your first line of element declarations.  It does nothing more than replace the '0' with 'Top':

//start:

tocTab[ir++] = new Array ("Top", "Cross Browser Expanding and Collapsing Table of Contents Menu", "TocMenu.htm#Top");

//end

I put an alert in displayToc.js to show where the code is always trying to find "top" on its first pass if you care to debug it, too:

//start

// currentIndex = Current heading's index in the tocTab array:
 var currentIndex = null;
 for (i=0; i<tocTab.length; i++) {
  //alert("tocTab[i][0] = " + tocTab[i][0] + " currentNumber = " + currentNumber);
  if (tocTab[i][0] == currentNumber) {
   currentIndex = i;
   break;
  }
 }
//end

Finally, you need to take to source HTML produced when you generate and save TocMenu.htm and replace the anchor reference to the 0 element with the top element:

<H1><A name=Top></A>Cross Browser Expanding and Collapsing Table of Contents Menu<br>&#150;<br>Version 2.0</H1>

 

cgisackson on Nov 13, 2001 at 11:05:25 AMRating: 2
Again it DOES NOT WORK without a massive debugging effort.  I don't think the author is picking up the proper version of his own js files.
abenoni on Nov 12, 2001 at 2:11:01 PMRating: 4
I must have missed something because it does not work with two framesets like:








If I only have 1 frameset it works. Any help?
agomes on Oct 16, 2001 at 11:00:24 AMRating: 5

Dear webmaster,

How could implement this menu without frames?

prob on Sep 15, 2001 at 2:07:06 AMRating: 5

Buggered if I can get this excellent looking code to work. I just get the page with the frames but without any of the content from the file that was converted using the generate script.  I have the correct directory structure etc and all the js files in place

It doesn't work if I use the original article's text either, no obvious problems with the output, it it has all the 'name=' etc tags.

Before I go potty, any suggestions?

braveheart on Sep 10, 2001 at 9:45:22 AMRating: 5
hlam2@yahoo.com on Sep 6, 2001 at 8:37:04 AMRating: 5
This is fantastic. Great job!!!
kgish on Aug 27, 2001 at 3:37:20 AMRating: 5
Shark on Aug 22, 2001 at 6:38:32 PMNo Rating
Can this menu be used without frames
craigwagner on Jul 17, 2001 at 6:13:22 AMRating: 5
Great script....I'll will be using it something I do in the near future!
agslin on May 28, 2001 at 5:47:16 AMRating: 5
Very useful script, and easy to generate the JavaScript array from data sources. For example, I've generated this TOC from XML conforming to the JavaHelp TOC DTD (see www.agslin.net)
k_man_13 on Apr 23, 2001 at 12:06:48 PMRating: 4

Easy to implement and understand... Provides functionality as stated. Great menu...

Has anyone noted (and possibly resolved) a problem with Back Button in the browser, and it's impact on the menu.

To duplicate, go to http://www.siteexperts.com/tips/techniques/ts03/index.htm and then try selecting [+] symbol for 2 through 6, then use back button to return to 1. Then select " 7 Authors Statement" (text - not the icon). Page 7 will display properly, but menu will show expanded navigation for 6.

Of course, back button cannot update array that maintains the status....

Perhaps a cookie ??

florianpw on Apr 20, 2001 at 8:12:45 AMRating: 5
The best i've found on the web. Easyless to modify, also, and i'm not certainly a java's expert. Using it since last september with it's original version, now i modified it to display headers inside change-colour table cells. Now i'm triyng to convert it to java to use it in a server-side jsp with toc contents inside db2. A very useful script.
RodneyV on Apr 20, 2001 at 4:24:28 AMRating: 4

wanted to give it a 5 for at least be compatable with IE5

and NS4+ but I just get error messages from Opera.

Rod

Matze on Apr 19, 2001 at 12:54:43 PMRating: 4

A nice  work....

Even the editorial is easy to understand and discusses alll Topics.

Only one thing is missing:

An autocollapse/ open button for the user to choose..

Otherwise thumbs up!!

Locknevi on Mar 21, 2001 at 3:32:16 PMRating: 4

Nice looking and easy to implement even for a newcomer, not to familiar with Java script.

Question. The first version opened up the tree if you clicked on either the "plus" sign or the header name.

How do you configure this version 2 to do that?

mcox on Feb 7, 2001 at 12:54:50 PMNo Rating
John Paton on Jan 31, 2001 at 3:13:11 AMRating: 4
This would be ideal if it could work without FRAMES (see senthil comment).  We currently have a menu structure, which is called in via includes. It would have been nice to replace the menus with this cross_browser TOC, and then "include" it into all current pages.  Can it be used without FRAMES??
des_carne on Jan 20, 2001 at 3:01:48 PMRating: 4
I think it is an excellent script - it runs fine in NS/IE 4 on both PC and Mac platforms.

It's a bit much to expect live databasing from it - I'm all in favour of static databasing as the poor person's alternative, when you can't afford the capital and utility costs of running your own server.

But I don't like the TOC scroll - it's a distraction when menus are short, and really needs about 80 pixels inserted at the top (you can set the initial position at -80) to keep the title in view on launching and when the first couple of items are expanded. It's indispensible when menus are fully expanded.

A very desirable and possible addition would be Expand All and Collapse All options, through a link or button at the foot or head of the menu or a separate menu control frame.

The main shortfall for me is, givem my passion for neatness, the deDisplay function doesn't navigate up or down directory levels. I like to keep all my content pages in a subdirectory called html. Once I do that I lose functionality of the Previous and Next links. This doesn't affect images, which can be stored neatly in their own directory structure.

I have created a TOC for a document collection which is periodically incrementally updated, and have to instruct users how to to add the new content. It would be nice if they could simply drop all the new html and image content files in separate directories and overwrite the tocTab.js file, and only have the index.html file, or a shortcut to it, at the top level.

ToC is a worthy competitor to Joust, FolderTree and HiTOC.
PL on Jan 15, 2001 at 2:15:03 AMNo Rating

Great article. Something could be improved though:

  1. The content of the menu should be dynamicly linked to a database
  2. Links should change color (A:Hover) when you move over it.
  3. Menus should open without having to click the "+" sign (onMouseover)

Is there anyone that knows how to make some of these improvements?

Peter,

 

alexnek on Jan 14, 2001 at 8:41:59 PMRating: 5
Does anyone here knows how to make those links change color when I mouseover it?
Torkel on Jan 9, 2001 at 3:52:02 AMRating: 4
The ToCMenu seemes to work allright both in IE5 and NS6, but in Opera5 it shows blank pages. As NS6 and Opera5 ought to be fairly competative, both claiming to follow W3C-standards, it should work in OPera as well. Does anybody have any suggestions on how to add a browser detection script for the Opera?
senthil on Jan 4, 2001 at 12:09:45 PMRating: 4
Cross browser menu is simply good. However, can it work without FRAMES? If it does then the rating would go all the way up.
rozneri on Jan 4, 2001 at 8:04:39 AMRating: 4
one little problem,
it's doesn't work on NS if I convert the frames to iframes.
exHannibal on Jan 4, 2001 at 2:16:43 AMRating: 4
Ah!

One small problemo with NS6. Having resized the window I notice that there are no scrollbars to let you see the rest of the menu.

All is fine in IE and NS4

Probably still deserves a 5-rating but now I feel compelled to mark-down :-)

exHannibal on Jan 4, 2001 at 2:11:59 AMRating: 5
Yes it does work in NS6.

So well-done.

I am NOT getting any errors in IE5.5, NS4/6

There is no progress bar problem mentioned earlier in IE5.5, although it does happen in NS6. However it does claim Document Done, so I doubt there's any great problem.

Jefit on Jan 3, 2001 at 2:34:19 PMRating: 5
Does it work with NS 6?
free4u on Dec 8, 2000 at 1:25:36 AMNo Rating
I was getting JavaScript errors too in netscape. Shame really because I was looking for something exactly like this.
Tapio on Dec 6, 2000 at 11:26:42 PMRating: 4

Really good article and very usable script, exactly what I was looking for.

There seems to be a small problem at least with IE5.5 : When clicking Toc link you get the contents page immediately and complete, but the browser's lower right-corner "Progress" tab activates and gives the impression that the contents page is not complete.  After clicking second time, it disappears.

 

PL on Dec 6, 2000 at 7:44:50 AMNo Rating
fdsafds
sondergaard on Nov 16, 2000 at 7:02:51 AMRating: 5

Very good article!

I have one major problem though:

When using Netscape and referring to a php-file instead of an htm.file - the document takes over the whole window as if it was called with a top.location.href. This only happens in Netscape...

I'm desperate, so please mail any suggestions to me at thomasse@epicus.dk

marks on Nov 9, 2000 at 5:34:10 PMRating: 5

It's so nice!!!

 

brian on Oct 3, 2000 at 1:17:21 AMRating: 4
I was getting JavaScript errors too in netscape. Shame really because I was looking for something exactly like this.
abarnuev on Oct 2, 2000 at 10:48:29 AMNo Rating
Why is it the TOC will work in Internet Explorer but on the MAC and netscape I get JAVA errors! Please help.
Thal on Sep 27, 2000 at 10:29:25 AMRating: 5
Jefit on Sep 23, 2000 at 3:39:45 PMRating: 4

Re: jefit.

Cancel my message Sept 22 2000. I worked it out. I was just making a silly mistake inserting the IMG HTML. Great menu. Thanks.

Jefit on Sep 22, 2000 at 4:53:32 AMNo Rating
How can I substitute a *.gif instead of a heading?
mohsen on Aug 16, 2000 at 5:29:15 PMRating: 1

I want to know how can I  attach  a  url (automatically ) to  each  MenuItem  when I used the Menu Toolkit Wizard by Scott Isaacs.

That means when I select the first MenuItem, I automatically attach to it a url .

eg: <input type=text  name=urlitem value="">

mohsen on Aug 16, 2000 at 4:51:44 PMNo Rating

Hello,

I want to know how can I  attach  a  url (automatically ) to  each  MenuItem  when I used the Menu Toolkit Wizard by Scott Isaacs.

That means when I select the first MenuItem, I automatically attach to it a url .

eg: <input type=text  name=urlitem value="">

 

prophecyslides on Aug 16, 2000 at 11:40:29 AMNo Rating
Does the toc have to be in a frame? 
fnatte on Aug 16, 2000 at 1:13:24 AMRating: 3

It's a nice menu, but I have no use for it as long as it upsets my history-array... if i click the back button i don't want to browse the menu backwards...

Fix that and the rating goes up. (I might even read the article.)

giri on Aug 15, 2000 at 7:11:30 AMRating: 5

 This is an excellent article & most useful one.

The concept &Logic was very nice.I took the code & modified according to my requirement.

 Thanks a lot to  Dieter Bungers for presenting this excellent cross browser Collapsable menu.

 

 

Most Recent Ratings/ Comments


To rate and comment on a resource, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password

Copyright © 1997-2008 InsideDHTML.com, LLC. All rights reserved.