Skip to content

For Shower

Jump to bottom
Frederick Feibel edited this page Oct 19, 2016 · 2 revisions

Refer to https://github.com/shower/shower for information about this presentation framework.

Installation

1. Place the following in the <head> tag

<link rel="stylesheet" href="path/to/presentable.css">

2. Add a slide where you want the table of contents to appear

<div class="slide" id="TableOfContents">
    <div>
        <section>
            <header>
                <h2>Table Of Contents</h2>
            </header>
            <nav id="presentable-toc" class="shower"></nav>
        </section>
    </div>
</div>

3. Add icon code as a child of the <body> tag

<div id="presentable-icon" class="shower">
    <a title="Table of Contents" href="#3">
        <img alt="Table of Contents" src="path/to/shower.png"/>
    </a>
</div>

4. Place after all the div.slide tags

<script src="path/to/presentable.js"></script>
<script>
    presentable.toc({
        framework: "shower"
    })
</script>

Newer versions of shower load based on DomContentLoaded, making coordination difficult. If you call presentable.toc right away it will parse the presentation before Shower has added the slide id attributes. To work around that the following code will delay the execution of presentable.toc. It's not pretty, but it works.

window.setTimeout(function() {
    presentable.toc({
        framework: "shower"
    })
}, 250)

You can increase 250 to suit the loading time of your presentation.

Clone this wiki locally