Presentable is a small script/plugin/widget/thingy that adds a table of contents to HTML based presentations by parsing the header tags.
See examples and detailed instructions: http://fcfeibel.com/presentable/
The following presentation frameworks are supported out of the box, and Presentable can theoretically handle other frameworks too, although your mileage may vary.
Currently Presentable has been tested and works in Firefox, Chrome, Safari, IE9/10, and the default browser on my HTC G2 Android phone.
These are generic instructions for installing. See the official documentation for presentation specific instructions.
Add the CSS in the <head> tag.
<link rel="stylesheet" href="path/to/presentable.css">
Wrap the following HTML in a slide.
<h2>Table of Contents</h2>
<nav id="presentable-toc" class="frameworkname"></nav>
And add this as a child of the <body> tag.
<aside id="presentable-icon" class="frameworkname">
<a title="Table of Contents" href="#?">
<img alt="Table of Contents" src="path/to/frameworkname.png"/>
</a>
</aside>
Reference presentable.js following the conventions set by your framework of choice.
<script src="path/to/presentable.js"></script>
This goes after all the slides.
presentable.toc({
framework: "framework name here"
});
It can also accept other configuration options allowing Presentable to support almost any framework.
presentable.toc({
config: "options here"
});
See examples and instructions: http://fcfeibel.com/presentable/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent