From: Ian Barton <lists@manor-farm.org>
To: emacs-orgmode <emacs-orgmode@gnu.org>
Subject: 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 [thread overview]
Message-ID: <4BF25E54.5000107@manor-farm.org> (raw)
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 other threads:[~2010-05-18 9:43 UTC|newest]
Thread overview: [no followups] expand[flat|nested] mbox.gz Atom feed
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
List information: https://www.orgmode.org/
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=4BF25E54.5000107@manor-farm.org \
--to=lists@manor-farm.org \
--cc=emacs-orgmode@gnu.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
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).