[RESOLVED] Creating links in TOC?

**Blue1974** · Nov 21st, 2009, 12:40 AM

Would it take a lot of code to generate each list item in the table of contents as a link to the place it references within the document? I've got some code that makes a TOC for a document. Would the <h3> tags need ids to link to or would that be taken care of by the javascript code?

Code:

var tocDiv = document.getElementById("toc");	// get the id of the toc division
	   
var headings = document.getElementsByTagName("h3");	// get all of the <h3> headings
		
for (var i = 0; i , headings.length; i++) {		// process all of the <h3> headings
alert(headings.item(i).firstChild.nodeValue);	// display what is in the ith heading (here only for example)
var tocText = document.createTextNode(headings.item(i).firstChild.nodeValue);	// create a node of the text in the heading
			
tocDiv.appendChild(tocText)		// append the new paragraph to the division
			
var newBr = document.createElement("br");	// create a <br/> element
			
tocDiv.appendChild(newBr);	// append the <br/> to the division
			
}
document.body.appendChild(tocDiv);	// append the division to the document body

I found this code pasted below and wondered if this is the way to do it this? All my headings are h3 tags and I don't know what it means about the reference to Netscape. Would it really take this much coding to take what I have up above and make links out of it? I'm just looking for the most simplistic way to try to do it?

Code:

<HEAD>

<style type="text/css">
<!--
#TOC {
  margin: 0px;
  display: inline;
  border-style: none;
}

#TOC a.:link {
  color:blue;text-decoration:none
}
#TOC a:visited {
  color:orange;text-decoration:none
}
#TOC a:hover {
  color:red;text-decoration:underline
}
#TOC a:active {
  color:green;text-decoration:underline
}

#TOC li.H1 {
  font: normal normal normal 14pt Comic Sans MS,verdana,georgia,arial;
  list-style-type: none;
  margin-left: 0px;
}
#TOC li.H2 {
  font: normal normal normal 12pt Comic Sans MS,verdana,georgia,arial;
  list-style-type: none;
  line-height:16px;
  margin-left: 10px;
}
#TOC li.H3 {
  font: normal normal normal 10pt verdana,Comic Sans MS,georgia,arial;
  list-style-type: none;
  line-height:16px;
  margin-left: 20px;
}
#TOC li.H4 {
  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
  list-style-type: none;
  line-height:16px;
  margin-left: 30px;
}
#TOC li.H5 {
  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
  list-style-type: none;
  line-height:16px;
  margin-left: 40px;
}
#TOC li.H6 {
  font: italic normal normal 10pt verdana,Comic Sans MS,georgia,arial;
  list-style-type: none;
  line-height:16px;
  margin-left: 50px;
}
-->
</style>

<script type="text/javascript">


var stateTOC = 'ON';

function toggleTOC() {
  if (stateTOC == 'ON') {
    stateTOC = 'OFF'
    document.getElementById('TOC').style.display = "none";
  }
  else {
    stateTOC = 'ON'
    document.getElementById('TOC').style.display = "inline";
  }
}

function buildTOC() {
  /***************************************/
  /* Get desired tags and store in array */
  /***************************************/
  
  validTagList = '. H1 H2 H3 H4 H5 H6 .';

  // Get list of all tags & store in array.
  // DOM Level 1 Standard */

  if (document.body.childNodes) {
    // alert('DOM Standard');
    allTags = getObjects();
  }
  // Microsoft proprietry intermediate DOM
  else if (document.all) {
    // alert('document.all');
    allTags = document.all;
  }
  // Netscape proprietry intermediate DOM
  else if (document.layers) {
    // alert('document.layers');
    alert('Netscape layers? What to do, what to do ....');
  }

  var tagDetail = new Array(1);
  j = 0;
  aNum = 0;
  for(i = 0; i < allTags.length; i++) {
    if (validTagList.indexOf(' '+allTags[i].tagName+' ') > 0) {
      // Add an anchor as a child to the tag so that toc link to it
      aNum = aNum + 1;
      var aNode = document.createElement("A");
      aNode.id = 'Z'+aNum;
      allTags[i].appendChild(aNode);

      // Keep relevant data fron the tag to use in toc separated by "|".
      // ....the name of the tag (eg. H3)
      tagDetail[j] = allTags[i].tagName + "|";

      // ....the anchor number we have assigned
      tagDetail[j] = tagDetail[j]+aNum + "|";

      // ....the text of the tag
        if (allTags[i].childNodes.length > 0) {
          tagDetail[j] = tagDetail[j]+allTags[i].childNodes[0].nodeValue
      }
      ;
      j = j + 1;
    }
  }

  /***************************************/
  /*Build toc                            */
  /***************************************/
  var ulNode = document.createElement("UL");
  tocId = document.getElementById('TOC');
  tocId.appendChild(ulNode);

  for(i = 0; i < tagDetail.length; i++) {
    thisDetail = tagDetail[i].split("|");

    var liNode = document.createElement("LI");
    liNode.className = thisDetail[0];
    ulNode.appendChild(liNode);

    var aNode = document.createElement("A");
    aNode.className = thisDetail[0];
    aNode.href = '#Z'+thisDetail[1];
    liNode.appendChild(aNode);
    aNode.innerHTML = thisDetail[2];

    // alert('i='+i + ' tagName='+aNode.tagName + ' href='+aNode.href + ' className='+aNode.className + ' text='+aNode.innerText);

  }
}

function getObjects() {
  var obj = new Array(1);
  j = 0;
  obj[j] = document.documentElement;
  traverse( document.documentElement );

  function traverse(node) {
    obj[j] = node;
    j = j + 1;
    if (node.childNodes != null) {
      for (var i=0; i < node.childNodes.length; i++) {
        traverse(node.childNodes.item(i));
      }
    }
  }
  return obj;
}
//-->
</script>
</HEAD>

<!-- Optional anchor for return to TOC -->
<a id=tocPos></a>

<!-- Optional access key (ALT-t) to return to TOC -->
<a href="#tocPos" title="AccessKey: t" accesskey="t"></a>

<!-- Optional button to toggle TOC on/off -->
<input
   type = "button"
   value = "Table of Contents"
   onclick = "toggleTOC()">

<!-- Required div to position TOC -->
<div id=TOC>
</div>

<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h2>header 1.1</h2>
<h3>header 1.1.1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h1>header 2</h1>
<h2>header 2.1</h2>
<h3>header 2.1.1</h3>
<h4>header 2.1.1.1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h4>header 2.1.1.2</h4>
<p>paragraph 4</p>

<h3>header 2.1.2</h3>
<h4>header 2.1.2.1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<h1>header 3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Thread: [RESOLVED] Creating links in TOC?

Thread Tools

Display

Threaded View

[RESOLVED] Creating links in TOC?

Posting Permissions