2011-07-22, 05:14 PM
This code allows you to do the following:
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.
[attachment=23473]
MyCode #1
Title: Table of Contents
Short Description: Organize your Articles!
Regular Expression:
How to use this code:
Where you want your table of contents type
In my screenshot below, I typed
MyCode #2
Title: Table of Contents Link
Short Description: A link in the table of contents
Regular Expression:
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:
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:
[attachment=23474]
Code used in demo:
- 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.
[attachment=23473]
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;}
</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]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\]<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\]<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:
[attachment=23474]
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
I designed it solely by myself
. But i still need a little modification as I requested to you already for it. thanks again.