From mboxrd@z Thu Jan 1 00:00:00 1970 From: Ian Barton 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 Message-ID: <4BF25E54.5000107@manor-farm.org> Reply-To: lists@manor-farm.org Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1; format=flowed Content-Transfer-Encoding: 7bit Return-path: Received: from [140.186.70.92] (port=60382 helo=eggs.gnu.org) by lists.gnu.org with esmtp (Exim 4.43) id 1OEJKj-0007Oh-BG for emacs-orgmode@gnu.org; Tue, 18 May 2010 05:43:48 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.69) (envelope-from ) id 1OEJ8h-0001jl-Jh for emacs-orgmode@gnu.org; Tue, 18 May 2010 05:31:09 -0400 Received: from mail.ian-barton.com ([109.74.196.44]:56930 helo=li40-130.members.linode.com) by eggs.gnu.org with esmtp (Exim 4.69) (envelope-from ) id 1OEJ8h-0001jZ-Am for emacs-orgmode@gnu.org; Tue, 18 May 2010 05:31:03 -0400 Received: from localhost (mail.wilkesley.org [127.0.0.1]) by li40-130.members.linode.com (Postfix) with ESMTP id 12FC8A938 for ; Tue, 18 May 2010 09:31:02 +0000 (UTC) Received: from li40-130.members.linode.com ([127.0.0.1]) by localhost (mail.manor-farm.org [127.0.0.1]) (amavisd-new, port 10024) with ESMTP id 6TsZRfdCXEQn for ; Tue, 18 May 2010 09:31:01 +0000 (UTC) Received: from [192.168.0.60] (unknown [217.146.125.41]) (Authenticated sender: ian@manor-farm.org) by li40-130.members.linode.com (Postfix) with ESMTPSA id B338BA903 for ; Tue, 18 May 2010 09:31:01 +0000 (UTC) List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org 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. 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 #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: The above example would restrict headers included in the TOC to the "main" div in your document, starting at

and including headers at "depth" below the start level. Ian.