- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
New on DHTMLGoodies.com:
DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.
Download TOC maker/Content organizer
You can download the entires script from this Zip file
How to write the content that should be organized
You write your content by use of plain HTML like this:
<p>Splendida porro oculi fugitant vitantque tueri. </P>
<div id="content_container"> is the parent element of all your content.
<div class="content_page"> indicates the start of a page. If you have a lot of content, it could be nice to separate it into different "pages". The script will make sure that only the first page is displayed initially. The other pages will be displayed automatically when someone clicks on a link to content on one of them.
Inside of <div class="content_page"> is where you put your actual content. The script will parse your Heading tags(<H1>,<H2>,<H3>,<H4>,<H5> and <H6>) and create a "Table of contents" based on them.
var insertNumbers = true;
var insertNumbers_as = [4,1,2,2,2,2];
var previous_txt = 'Previous page';
var next_txt = 'Next page';
var includeNextPreviousLink = true;
var treeDepth = 4;
var tocStyle = 1;
var treeExpandAll = true;
var cssActiveLink = 'font-weight:bold;';
- insertNumbers = Dynamically insert numbers in front of headings
- insertNumbers_as = How to insert numbers, 1 = digits 0-9, 2 = A,B,C...Z, 3 = a,b,c...z, 4 = Roman I,II,III,IV. This is an array. This means that you could specify that top nodes hould have roman numbers, sub of top nodes should have alphabetical numbers etc.
- previous_txt = Text in link to previous page at the bottom of the page
- next_txt = Text in link to next page at the bottom of the page
- includeNextPreviousLink = Include links to previous and next page at the bottom
- treeDepth = 4 = Depth of three. i.e. which headings should we parse(4 = <h1>,<h2>,<h3> and <h4>)
- tocStyle = 1; = How to display list table of content in the left column, 1 = As a tree, 2 = Slide menu, 0 = No styling at all, i.e. you set the layout by applying css to #toc_pane ul.
- treeExpandAll = true; = If table of contents is displayed as a tree, should all nodes be expanded initially? (true = yes, false = no)
- cssActiveLink = CSS rule for active nodes in table of contents. I.e.: This style will be applied when someone clicks on a link
<link rel="stylesheet" href="css/slide_menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/dhtmlgoodies_tree.css" type="text/css" media="screen">