Table of Contents

[Wes the Bes]

This code allows you to do the following:

• Scroll to the desire selection
  
• Customize the Base Color (any color but white)
  
• Organize!
  

To do this you need 3 MyCodes
One for the table of contents base, another for a link in the table of contents, and the last in the section to scroll to.

First I would like you to upload the following image to the images/ directory.
   


MyCode #1
Title: Table of Contents
Short Description: Organize your Articles!
Regular Expression:

\[toc color=(.*?)\](.*?)\[/toc\]

Replacement:

<style type="text/css">div.toc_$1 a,div.toc_$1 a:visited {color: $1;} div.toc_$1 a:hover, div.toc_$1 a:active{color: #000; text-decoration: underline;}
</style>
<center><font color="$1" size="4">Table of Contents:</font>
<div style="line-height: 1.6; background: url(images/tocback.png) repeat-x $1; border: 1px solid $1; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width: 40%; font-size: 16px; font-weight: bolder;" class="toc_$1">
$2
</div></center>

How to use this code:
Where you want your table of contents type

[toc color=Base Color][/toc]

Remember to put in the base color, because it may not work (yes, black is able to be seen)....
In my screenshot below, I typed

[toc color=Purple][/toc]

MyCode #2
Title: Table of Contents Link
Short Description: A link in the table of contents
Regular Expression:

\[contlink=(.*?)\](.*?)\[/contlink\]

Replacement:

<span style=" margin: 0;padding-top: 10px; padding-bottom: 0px;"><a style="cursor:pointer" href="#$1">$2</a></span><br />

How to use this code:
Well in the [toc color=blah][/toc] tags, you type [contlink=(value explained later)]The Link in the Table of Contents[/contlink]
This will specify where the link will scroll to (already does line breaks after each code). However, I could not find a jQuery/Javascript code that would scroll when inputted into the code.


MyCode #3
Title: Anchor Name
Short Description: Gives a name for the page to identify [for table of contents]
Regular Expression:

\[tocname=(.*?)\](.*?)\[/tocname\]

Replacement:

<a name="$1">$2</a>

How to use this code:
Well around where you want the page to scroll to, type [tocname=(value explained below)]Header[/tocname]
Before I said in the [contlink] code the value after "=" represents the something I'm going to explain now. Well it represent where it scrolls to... The value is identical to the value after "=" above in the [tocname] code. If different, well the scrolling will not work. If you have the same value for all [tocname]s, well the scrolling will get confusing.


Screenshot:
   

Code used in demo:

[toc color=Purple]
[contlink=link1]Link 1[/contlink]
[contlink=link2]Link 2[/contlink]
[contlink=link3]Link 3[/contlink]
[/toc]
[tocname=link1]Link 1[/tocname]
Paragraph




[tocname=link2]Link 2[/tocname]
Paragraph




[tocname=link3]Link 3[/tocname]
Paragraph

[Paul H.]

Kewl.

[Wes the Bes]

Thanks I designed it solely by myself

[Toon World]

Wtg Wes! I'll be using this :p

Btw, it's me Soul!

[strang3r]

thanks for this mycodes. I looked everywhere for a TOC to use in mybb but didnt found except this one . But i still need a little modification as I requested to you already for it. thanks again.