emacs-orgmode
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Orgmode] Mini HOWTO: Using jQuery and a Plugin to Build a Page Table of

From: Ian Barton
Subject: [Orgmode] Mini HOWTO: Using jQuery and a Plugin to Build a Page Table of Contents in javascript.
Date: Tue, 18 May 2010 10:31:00 +0100
User-agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.1.9) Gecko/20100423 Thunderbird/3.0.4 
Org's built in support for generating a table of contents is
excellent. However, if you export your org files using the body only
option (e.g. if using Jekyll), org doesn't produce a table of contents
for you. There may also be times when the built in method doesn't
quite do what you want.

An alternative is to build your own TOC using javascript. Rather than
try to hand craft your own implementation you can use jQuery and the
plugin from http://fuelyourcoding.com/scripts/toc/ . There are a
number of jQuery plugins available, but this one worked out of the box
for me and the output is quite configurable.

Setup.
=====
you need to include the jQuery library and the plugin into your
exported documents html header section.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; type="text/javascript"></script> <script src="http://yourhost.com/scripts/jquery.tableofcontents.min.js"; type="text/javascript" charset="utf-8"></script> 
</head>

This uses Google's copy of jQuery and you need to adjust the path to
the TOC plugin to suit its location on your server.

You will need to include an empty container div in your document,
where you want the TOC to appear. In your org file put the following:

#+BEGIN_HTML
<script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $("div#toc").tableOfContents();
            })
</script>
#END_HTML

If you are using Jekyll and want the TOC to appear on every page, you
can include the script section in your template file.

You will need to define some settings in your style sheet to control
how the TOC div is displayed. The example below floats the TOC in a
yellow bordered box to the right of the div containing your content.

#toc {
        float: right;
        font-size: 10pt;
        width: 200px;
        padding: 10px 10px 10px 20px;
        background: #efffb1;
        border: solid 1px #ccd136;
        margin: 0 0 10px 15px;
}

The TOC plugin is highly configurable:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){ $("#toc").tableOfContents($('#main'),
{
startLevel: 2,
depth, 3
}
);
            });
</script>

The above example would restrict headers included in the TOC to the
"main" div in your document, starting at <h2> and including headers
at "depth" below the start level.

Ian.
reply via email to
[Prev in Thread] Current Thread [Next in Thread]