MyBB Community Forums
Table of Contents - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: MyCodes (https://community.mybb.com/forum-117.html)
+--- Thread: Table of Contents (/thread-99571.html)

Table of Contents - Wes the Bes - 2011-07-22

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


RE: Table of Contents - Paul H. - 2011-07-24

Kewl.

RE: Table of Contents - Wes the Bes - 2011-07-25

Thanks Toungue I designed it solely by myself

RE: Table of Contents - Toon World - 2011-07-31

Wtg Wes! I'll be using this :p

Btw, it's me Soul! Toungue

RE: Table of Contents - strang3r - 2011-09-05

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.