Download TOC maker/Content organizer

Demo with tree | Demo with slide menu

Download files

You can download the entires script from this Zip file

Configuration

How to write the content that should be organized

You write your content by use of plain HTML like this:

<div id="content_container"> <div class="content_page">
  <h1>Europe</h1>
  <p>Splendida porro oculi fugitant vitantque tueri. </P>
  <h2>Norway</h2>
  <p>Simulacra ferunturet.</P>
  <h3>Oslo</h3>
  </div>
</div>

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

Layout

Most of the layout is controlled by plain CSS. But you also have some Javascript variables available which you can use to control the appearance of content. You define these variables in your HTML file. These are the variables you have available:

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

References to external Javascript and CSS files

The scripts refers to CSS and Javascript files for the tree and slide menu. You may remove the references you don't need. This is the code you will find inside your HTML file:

<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">
<script type="text/javascript" src="js/dhtmlgoodies_tree.js"></script>
<script type="text/javascript" src="js/slidemenu.js"></script>

Comments

Nicole
No one has commented this? Why?

Some Years ago i find this beautyfull Script and now i was forgotten what you domain was. So i searched and find it (thx god)again. I love your site, good scripts, site has a clean structure and demos.

I'dont understand why not more people say thank you for your work, it's great.

Lovely Greetings from Germany
Nikki
Nicole at 01:11AM, 2012/01/07.
Livy
I agree with Nikki , i wonder why so good scripts are free !
Livy at 06:41PM, 2013/06/04.
Vitaliy
HELLO special for you www.sidorochev.ru !
Vitaliy at 02:13PM, 2014/12/03.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com