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

Categories...
Client User Group
Write Once!
Language
JavaScript
Product
IE4, IE5, NS4
Task
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
Submission by Bungers

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

Add to Assistant

Short Description
A 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.

Author
Dieter Bungers
Date/ Version
3/14/2000
Submission URL
http://www.SiteExperts.com/tips/techniques/ts01/index.htm
Submission Date
Mar 14,2000
Last Update
Mar 14,2000
Related To
Inside Techniques
 

Discussion and Rate this Resource
Overall Rating: 4.4

Cees on Jan 14, 2003 at 5:27:43 AMRating: 4

I've the problem that the browser is still reloading a page so if he's ended with loading. E.g. the page is in the browser but the 'load-bar' is reloading slowly. Can anymone help me ?

Sanho on Sep 10, 2002 at 6:56:59 AMRating: 4
Question: it's all working fine, only one 'but'. When loading a menu wich is larger that the frame it scrolls automaticly to the end of the menu. Is there a way to solve this? So that the menu loads at the beginning (I want to keep the auto scrolling feature!)
Krammer on Aug 17, 2002 at 7:23:57 AMRating: 5

This is supurb. I'll be using nothing else in the coming years. I've a question, which is put on the discussion before by Andreas, but I can't find the answer. I'm trying to create a link from the content-page back to the toc. This works only if the content-page is in the same directory. But I've got a lot of content-pages and therefore I do want to use subfolders.

Can anyone help me?

Thanks, Tijs, tijs@krammer.nl

hsin on Aug 13, 2002 at 8:22:03 PMRating: 4

Very nice, but when I click on the left side on the toc 2.2.4 Hilighting, the title of article 2.2.4 Hilighting does not move on the top of the screen. So with the 2.2.5 and so on.

What is the solution ? Thanks !

 

vvrvarma on Aug 10, 2002 at 1:58:02 PMRating: 5

Excellent Script!!!

Just one question.

I am trying to work it out for  a web page without using frames. couldnt succeed yet. could you let me know if i could use it in a page without frames.

thanks in advance

alo on May 3, 2002 at 1:58:13 PMRating: 5

Very nice script - one question though!

I am trying to get html in a subfolder to the tocTab to link back in the TOC. The following works if the are in the same folder:

<a href="javaScript:parent.reDisplay('0',false)">link</a>

But I can not figure out how to make the script point to a higher folder? (../ will not do?!)

Please comment - regards - andreas

 

barryc on Nov 27, 2001 at 11:50:43 AMRating: 5

Well done Dieter.

Solid code which outperforms other commercial DHTML menu generators. Works flawlessly for me with IE 5+ & Netscape 4+ (PC & Unix!!!).

Thanks for putting this up.

Barry

abenoni on Nov 27, 2001 at 3:28:35 AMRating: 4
Very nice but I cannot get it to work in a different frameset with: 1 TOP frame and the 2 TOC frames under. It only works when I use the standard 2 frames setup. Anyone tried this in a different frame setup??
wurzl on Nov 26, 2001 at 7:47:39 PMNo Rating

just a small add-on which detects the "nCols" itself:

var nCols = 1;
 var temp = 0;
 for (i=0; i<tocTab.length; i++) {
  temp = 1;
  for (j=0; j<tocTab[i][0].length; j++) {
   if (tocTab[i][0].charAt(j) == ".") temp++;
  }
  if (nCols < temp) nCols = temp;
 } 
...have fun!
peterbasic on Oct 18, 2001 at 1:00:31 AMRating: 5

forgot to rate it v. sorry. Given my earlier comments you might have guessed it was 5. Hope you can alter the results your end. I'd hate to think I'd adversely affected the average rating.

Thanks again

Peter

peterbasic on Oct 18, 2001 at 12:58:37 AMNo Rating

It makes a very nice change to see a straightforward task handled in a businesslike way. Games and gimmicks are great for exploring what's possible, sometimes (particularly when attempting 'skill transferrance') developers just need the solid facts. Many thanks for restoring my faith in this type of internet resource. I'll be putting a link on my web site.

Best Regards

Peter Moorcroft

niranjanad on Sep 19, 2001 at 9:01:44 AMRating: 4
I have a question. Is it possible to use this with dynamic data? In other word the menu items in the TOC will not be static but will be generated depending on the user.
Iliah Borg on Sep 3, 2001 at 2:08:45 PMRating: 5

To keep all the content on one page:

index.php:

<?php

require("tocTab.php");
if ($currentNumber == "") $currentNumber = "0";
if ($currentIsExpanded == "") $currentIsExpanded = "1";
$prevNumber = 0;
$nextNumber = 0;
for ($i=0; $i<sizeof($tocTab); $i++) {
 if ($currentNumber === $tocTab[$i][0]) {
  if ($i > 0) {
     $prevNumber = $tocTab[$i-1][0];
  } else {
     $prevNumber = 9999;
  }
  if ($i<sizeof($tocTab)-1) {
     $nextNumber = $tocTab[$i+1][0];
  } else {
     $nextNumber = 9999;
  }
  break;
 }
}
?>
<html>
<head>
<TITLE>Your title here</TITLE>
</head>
<frameset cols="200,*" border=0>
 <frame src="toc.php?currentNumber=<?php echo $currentNumber; ?>&currentIsExpanded=<?php echo rawurldecode($currentIsExpanded); ?>" name="toc">
 <frame src="show.php?prevNumber=<?php echo $prevNumber; ?>&currentNumber=<?php echo $currentNumber; ?>&nextNumber=<?php echo $nextNumber; ?>" name="content">
</frameset>

show.php:

<?php
$file2read="./index.htm";
readfile("./header.inc");
$content_file2read=file($file2read);
// echo $start_pos;
$start_chapter = "A name=" . $currentNumber;
$end_chapter = "end of the chapter";
$current_tag = $start_chapter;
$found=false;
$current_header ="<h1>Your current header</h1>";
while ( list(,$str) = each ($content_file2read)) {
  if (!$found) {
  $pos=strpos($str, "<H1>");
  if (is_int($pos)) $current_header = $str;
  }
  $pos=strpos($str, $current_tag);
  if (is_int($pos)) {
   if (!$found){
    if ($str <> $current_header) echo "<H3 align=\"center\"><i>" . ereg_replace("^[0-9]*","",strip_tags($current_header)) . "</i></H3>";
    echo $str;
    $found=true;
    $current_tag = $end_chapter;
   }
   else {
    break;
   }
  }
  elseif ($found) echo $str;
}
echo "<p> </p><table align=left width=800>";
echo "<tr>";
if ($prevNumber <> 9999) echo "<td width=400><A href=\"index.php?currentNumber=$prevNumber\" target=\"_top\"><img src=\"../tocImages/back.gif\" alt=\"…return to prev. page\" align=\"center\" border=\"0\"</a></th>";
if ($nextNumber <> 9999) echo "<td width=400><A href=\"index.php?currentNumber=$nextNumber\" target=\"_top\"><img src=\"../tocImages/next.gif\" alt=\"jump to next page…\" align=\"right\" border=\"0\"</a></th>";
echo "</tr>";
echo "</table>";
readfile("./footer.inc");
?>

header.inc:

<html>

<head>
<title>Your title</title>
<style>
<!-- your style defs -->

</style>
</head>

<body>

footer.inc:

</body>
</html>

iven on Jul 2, 2001 at 5:16:33 AMRating: 5
really cool!
ComeWithMe on May 31, 2001 at 3:52:12 AMRating: 5

It's excelent, but I've 1 question.

It it possible to highlight number [1] if it's selected onloading, or number [0] is just an item in the menu and not the name of the menu ?

thx

akamran on May 19, 2001 at 9:22:05 PMRating: 5
Cool !
agomes on May 18, 2001 at 3:16:29 PMRating: 4
How could implement this feature without using frames?
swim45 on Apr 3, 2001 at 12:11:15 PMRating: 4

I could not find where the functions in the generate.js are called. A simple test seemed to indicate that its not needed - I modified the Toctab.js and restarted Navigator and it seemed to work. Some more discussion on the methods would help. Iwas expecting to see a use of layers for NN and visible not vis. div tags. - but neither are used.

mindbender9 on Mar 12, 2001 at 1:32:58 PMRating: 4

QUESTION: Has anyone gotten this script to work without using FRAMES (i.e. in an "include" file)?

I've seen one or two requests for any help regarding a frame-less implementation... but no one has responded.

And despite this menu code being rather impressive, the documentation (yes... I've attempted to read it) is poor. As such, I've tried to figure out the code, although Ky Hote's adaptation seems much better http://owlmo.home.texas.net/links/

Can someone help? Thanks for your assistance.

exHannibal on Feb 2, 2001 at 7:06:22 AMRating: 5

Databasing this should be easy.  If you just replicate the tocTab.js code inside a CFM/ASP/PHP template.

exHannibal on Feb 2, 2001 at 7:01:54 AMRating: 5
The article IS the sample, if that's what you mean.
bzheng on Feb 1, 2001 at 12:58:40 PMRating: 1

where the hell is the sample I can see some vision effection.

 

alexnek on Nov 9, 2000 at 2:16:32 AMNo Rating
Issit possible to use it without frame? Anyone?
alexnek on Nov 2, 2000 at 1:04:49 AMRating: 5

Burger / Bdato:

Regarding bdato question:Has anyone considered databasing this menu system using SQL?

Can someone tell me where I could get a tutorial for that? It's very important to me. Btw, great job burger !!!

Sleeper9 on Oct 18, 2000 at 7:00:07 AMRating: 5

Great tool, I have a small problem implementing an inital menu with more than one submenu open, anyone got any solution for this?

 

mbelmar on Jul 17, 2000 at 7:46:36 AMRating: 5

I belive It's a grate solution.

I am graphic designer, I need to now if it's posible do the same effect with images, I did something similar www.activebusinesscons.com/mifel  in Explorer works perfectly but in Netscape don't.

Help me please.

Marco Belmar, from Mexico City

pwe.schmidt on Jul 14, 2000 at 6:53:43 AMRating: 5
Thanks a lot for this very helpful introduction.
jsmarr on Jul 2, 2000 at 7:19:51 AMRating: 4
Very nice, but this has the same problem that all TOCs on the web seem to have that you have to hit the browser back button twice to get anywhere because once changes the page and twice changes the TOC. Surely there's  agood workaround to keep things synced...
onehand on May 25, 2000 at 8:07:22 AMNo Rating
excellent article!
I amended the code with cookies so that when a user links away from the menu, they will come back with the menu expanded just as they left it. check it out at http://owlmo.home.texas.net/links
- Ky Hote
bungers on May 24, 2000 at 6:58:01 AMNo Rating

Thanks to all who discussed my article. Here are my remarks to some of the contributions.

Q on Mar 26, 2000 at 5:59:22 AM:

We solved this problem of embedded framesets simply by don't using nested frameset definitions. (Define the frameset definitions in separate HTML files instead and refer in the src attribute of a <frame> tag of the outer one to an inner one.)

calixto on Mar 31, 2000 at 8:43:38 AM and Q on Apr 4, 2000 at 9:20:27 AM:

I tested it on Mac.OS 8.1 with IE 4.5 and NS 4.5 and it works well except the automatic scrolling which is a general problem of the JavaScript scroll function. How to handle the problem? You can omit scrolling by simply omit the statement "toc.scroll(0,scrollY);" at the end of the function "reDisplay()" in the script "displayToc.js". You can also try to find another factor for the ToC's line height at the end of the statement in line 49 of the script "if (addScroll) scrollY+=((thisLevel<2)?mdi:sml)*25;" that suites better the requirements of a Mac. -- There is also the general problem that CSS styles work differently with Window and Mac OS.

shimoncrown on May 9, 2000 at 1:20:48 AM:

Is it really so hard to understand from my article how the script works? Did you read section 4 "How it Works" carefully and did you look at the script? The core idea of all is the mechanism that controls expanding and collapsing. This is described in detail in section 4.2.2. There you'll find a lot of references to the variables I use so you can easy follow up how the script works.

btado on May 9, 2000 at 6:58:29 AM:

Databasing this menu system using SQL makes sense if the ToC often changes. You can do it by using a server scripting language such as PHP, Allaire's ColdFusion, Microsoft's VBScript for IIS, or ExperTelligence's WebBase end exploiting the SQL interface they provide. I already realized a version for ExperTelligence's WebBase (which is powerful but, unfortunately, not very popular) & MS ODBC/Access and am thinking about a version for LAMP (Linux & Apache & MySQL & PHP). Contact me if you need help to database the menu.

prophecyslides on May 10, 2000 at 3:54:37 PM:

Suppressing the automatic collapsing of a node is somewhat difficult but not impossible. (It would be simple if your clients did only use IE4+). Contact me if you need help to realize a non collapsing version of the menu.

Dieter Bungers

mattiask on May 15, 2000 at 4:55:55 AMRating: 5
Excellente!
I'm mighty impressed with this way of organising links on a web page...
droger on May 12, 2000 at 6:55:12 AMRating: 5

Fantastisch! Sehr Gut!

prophecyslides on May 10, 2000 at 3:54:37 PMNo Rating
Question for those of you that have been using it?  Can you make it so that it doesn't collapse when you click another node?
btado on May 9, 2000 at 6:58:29 AMNo Rating
Has anyone considered databasing this menu system using SQL?
shimoncrown on May 9, 2000 at 1:20:48 AMRating: 3

Probably the best tree I have seen. The article is great for out of the box users but lacking in explanation for developers.

mike_mundy on May 8, 2000 at 11:37:39 AMRating: 5

Easy to understand, easy to implement.
Recommended.

njoyard on Apr 8, 2000 at 6:49:59 AMRating: 4

Wow ! This is a very fine menu tool ! In fact I think it's the best I ever saw... I won't wait one more minute to put it on my website

Q on Apr 4, 2000 at 9:20:27 AMRating: 4
I've gotten it to work on a Mac, but it is very inconsistent. I think that the exact position that MIR is at in orbit has something to do with it.
calixto on Mar 31, 2000 at 8:43:38 AMRating: 3
What about the Macintosh platform ? It don't seem to work on Macs which is a too big drawback to use it on ANY site I develop
emilyyu on Mar 30, 2000 at 11:31:24 AMRating: 5
Very good. Except should use "backColor" in "displayToc.js" instead of the fixed background color for menu.
grantandlinda on Mar 29, 2000 at 7:02:00 PMRating: 5

Like the author said, there are probably more powerful navigation systems that run only under ie4+.  the thing about this navsys is that it is browser independent.  This is a huge bonus and the speed is another factor that makes it an excellent navsystem.  I tried a navsys once written by Shamir Tomer who wrote "Advanced Javascript Programming" using cookies.  Extremely slow and caused a page refresh each time you clicked a link.  This navsys is excellent and I'll be using it when I develop our companies intranet. 

SuhasJ on Mar 27, 2000 at 8:28:35 AMRating: 5

dsgdsgdsfgdfg

Q on Mar 26, 2000 at 5:59:22 AMRating: 4
Doesn't seem to work in NS4+ with embedded frames.  Any suggestions?
onehand on Mar 24, 2000 at 2:08:11 PMRating: 5
I havent' tried it out yet, but it looks like an easy to read method of a great navigation scheme. Thanks
-Ky
gcmartin on Mar 22, 2000 at 1:41:07 PMRating: 5
Good Job!
jdvorak on Mar 17, 2000 at 6:40:08 AMRating: 5
Excellent work.

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.