MyBB Community Forums

Full Version: Table of Contents
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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\]
<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;}
<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">

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:
<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:
<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.


Code used in demo:
[toc color=Purple]
[contlink=link1]Link 1[/contlink]
[contlink=link2]Link 2[/contlink]
[contlink=link3]Link 3[/contlink]
[tocname=link1]Link 1[/tocname]

[tocname=link2]Link 2[/tocname]

[tocname=link3]Link 3[/tocname]

Thanks Toungue I designed it solely by myself
Wtg Wes! I'll be using this :p

Btw, it's me Soul! Toungue
thanks for this mycodes. I looked everywhere for a TOC to use in mybb but didnt found except this one Smile . But i still need a little modification as I requested to you already for it. thanks again.