Table of Contents

[Wormopolis]

Browser Tested: IE and FF
placement: main header and footer

Puts a table of contents at the top of your forum if you have a long list of boardsfor quick access. hide/show icons provided. See preview.

Header portion:


<table id="TOCtable" cellspacing="0" cellpadding="0" border="0" width="50%" align="center" valign="top" bgcolor="0066FF" class="bordercolor" style="display: none">
<tr>
<td width="100%">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" class="welcomebg" bgcolor="000000">
<span align="right" id="ctrl" valign="top"><image src="http://s1.images.proboards.com/hide.gif" style="display:none"  onclick="this.nextSibling.style.display=''; this.parentNode.nextSibling.style.display='none'; this.style.display='none'; this.parentNode.nextSibling.nextSibling.style.display='';" /><image src="http://s4.images.proboards.com/show.gif" onclick="this.previousSibling.style.display=''; this.parentNode.nextSibling.style.display=''; this.style.display='none';  this.parentNode.nextSibling.nextSibling.style.display='none';"/></span><span align="left" style="display:none">Table of Contents</span><div valign="top" id="TOC">TOC</div>
</td>
</tr>
<tr>
<td align="left" class="welcomebg" bgcolor="000000">
<div id="members">
</div>
</td></tr>
</table>

</td>
</tr></table>


footer portion:


<script type="text/javascript">
<!--
//  Table of Contents v1.3
//  by Wormopolis
//  Do not repost, keep header intact
//  make sure you get the HTML that goes with this
//  wormocodes.proboards.com
if (!location.href.match(/noTOC/i)) {


var spacer=" ";
var TOCcontent="<center>TABLE OF CONTENTS</center><br><br>";
if (!location.href.match('=')) {
lnks=document.getElementsByTagName('a');
for (w=0; w<lnks.length; w++) {
if (lnks[w].name) {
catHeader=(lnks[w].nextSibling.nodeName=="#text"?lnks[w].nextSibling.nextSibling:lnks[w].nextSibling);
TOCcontent+=("<a href='"+lnks[w].href+"#"+lnks[w].name+"'>"+catHeader.innerHTML+"</a><br>");
}
if (lnks[w].href.match('board=') && !lnks[w].href.match('thread=') && lnks[w].onclick) {
bHeader=lnks[w].firstChild;
TOCcontent+=(spacer+spacer+spacer+"<a href='"+lnks[w].href+"'>"+bHeader.innerHTML+"</a><br>");
}
}
document.getElementById("TOC").innerHTML=TOCcontent;
document.getElementById("TOCtable").style.display="";
}
}

//-->
</script>



coming soon: cookie to keep hide/.show preference


SEE PREVIEW

[game]

Aye Wormo,
I've been trying to put this in a floating side table with a scroll bar attached, any suggestions?
So far I have tried putting the whole header part of the code in a floating table with position value set to fixed and the overflow- x value set to auto.
No luck with that.

[Wormopolis]

What URL should I be looking at? this code was one of my older ones and could probably stand to be updated anyways. the preview doesnt work because I was in the process of moving it to the demo board.

[game]

My Site

Please excuse the mess, (especially if you are using FF) I'm in the process of remodeling it ;D



The table is on the right side of the main page.

[Wormopolis]

I actually see content, it just doesnt show all of it because the div isnt scrolling. Im trying to figure it out. I know its possible because that is basically the same as sub's peekaboo tables

[game]

OK, I figured it out.
I gave it a div class like so:

<style type="text/css">
.table
{
position: fixed;
_position: absolute;
top:0px;
_top: expression (ignoreMe=0+document.body.scrollTop+"px");
right:0;
width:150px;
height:300px;
overflow-y:scroll;
-moz-scrollbars-vertical;
background-color:#000000;
}
</style>



<div class="table">
code here
</div>

now it floats, scrolls, and is fixed in IE and FF!
Thanks

[Wormopolis]

excellent. I thought you wanted it to go top to bottom so that is what I was trying to make work.