[JavaScript] ToC Generator

1) CODE TITLE: ToC Generator

2) AUTHOR NAME/NOTES: Michael Burt

3) DESCRIPTION: ToC generator which uses arrays to store the corresponding info. Instructions on link below.

4) URL TO CODE:

http://mburt.mb.funpic.org/projects/toc/

I'm sort of pressed for time now, so I'll elaborate on it later :p

I wouldn't use anything but a server side language to generate a table of contents so that search engines can view the content. If you don't care about search engines seeing your content this would be useful.

Doing so server-side would be easy as well, but seeings this is a dhtml forum...

I think you should be allowed to put forth the server-side code for this here if you like. One of the areas of server-side coding that has always fascinated me and where I think the real innovation for these types of applications (menus, galleries, other dynamic content) lies is in having the code work on the client side when it can at those times when this would generally be faster or more spectacular looking while always having a server-side fall back for the non-javascript enabled user. I understand how this is generally done between javascript and plain HTML but, I have little grasp of how this can actually be carried out in a server and client side scripting environment. Any simple examples for things like a menu, etc., as mentioned would be really neat. Especially useful would be if the server-side back up could be written to use a variety of server-side languages, depending upon the server that someone wanted to install the menu on. A little like the Local Time script here at DD that can use PHP, asp or shtml but, a bit more involved. It would be this kind of utility across platforms that would make something like that really hot if it could be worked out. Simply having just a PHP fall-back would be pretty cool too.

Hmm... after thinking it over, I decided to actually post one here. Here's an easy PHP implementation of it:

Code:

---

<?php
$main_headers = array("My Site","Dynamic Drive","Header 3","Header 4");

$sub_headers = array();
$sub_headers[0] = array("Homepage","Scripts","Resources");
$sub_headers[1] = array("Homepage","New Scripts","Tools","Forum","CSS Library");
$sub_headers[2] = array("Sub 1-3","Sub 2-3","Sub 3-3","MySub 1","MySub 2");
$sub_headers[3] = array("Sub 1-3","Sub 2-3","Sub 3-3","MySub 1","MySub 2");

$sub_links = array();
$sub_links[0] = array("http://mburt.mb.funpic.org/?p=home","http://mburt.mb.funpic.org/?p=scripts","http://mburt.mb.funpic.org/?p=resources");
$sub_links[1] = array("http://www.dynamicdrive.com/","http://www.dynamicdrive.com/new.htm","http://tools.dynamicdrive.com/","http://www.dynamicdrive.com/forums/","http://www.dynamicdrive.com/style/");
$sub_links[2] = array();
$sub_links[3] = array();
$htmlc = "";
for ($i = 0;$i < count($main_headers);$i++) {
        $htmlc .= "<h1>$main_headers[$i]</h1>\n";
        for ($a = 0;$a < count($sub_headers[$i]);$a++) {
                $htmlc .= "<a href=\"".$sub_links[$i][$a]."\">".$sub_headers[$i][$a]."</a>\n<br>";
                }
        }
echo $htmlc;
?>

---

See result here: http://mburt.mb.funpic.org/testing/toctest.php

The html output works rather well and is clean, but seeings this isn't a php site, we might as well go back to the original JavaScript version.

I personally like my attempt better, but to each his own! Also, I'm not sure if "init" was the best name, as a LOT of other scripts use this. On the same note, you should run a check on window.onload to make sure another script isn't already using it. If it is you need to make a copy and run both functions. Both of those will make the script play nice with others.

hmm... So I think I'll change:

Code:

---

window.onload ...

---

to

Code:

---

if (window.addEventListener) {
        window.addEventListener("load", init.display, false)
        }
else if (window.attachEvent) {
        window.attachEvent("onload", init.display);
        }
else if (document.getElementById) {
        window.onload = init.display;
        }

---