* Mini HOWTO: Using jQuery and a Plugin to Build a Page Table of Contents in javascript.
@ 2010-05-18 9:31 Ian Barton
0 siblings, 0 replies; only message in thread
From: Ian Barton @ 2010-05-18 9:31 UTC (permalink / raw)
To: emacs-orgmode
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.
^ permalink raw reply [flat|nested] only message in thread
only message in thread, other threads:[~2010-05-18 9:43 UTC | newest]
Thread overview: (only message) (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2010-05-18 9:31 Mini HOWTO: Using jQuery and a Plugin to Build a Page Table of Contents in javascript Ian Barton
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).