Reveal.js-Title-Footer
Footer showing title for Reveal.js HTML presentations
Description
What is Reveal.js-Title-Footer?
Reveal.js-Title-Footer is a plugin for the Reveal.js framework for HTML presentations (https://github.com/hakimel/reveal.js).
What does Reveal.js-Title-Footer do?
Reveal.js-Title-Footer includes a footer in all the slides of a Reveal.js presentation (with optional exclusion of some slides) that will show the title of the presentation.
Configurable options
The title to show on the footer is configurable.
The background color of the footer is also configurable.
Installation
Necessary files
The title-footer
folder of the plugin
folder has to be copied to the plugin
folder of the Reveal.js presentation.
CSS
The CSS of the Reveal.js-Title-Footer plugin is included dynamically when it is initialized. However, if we configure the presentation not to include the Reveal.js-Title-Footer footer in the first page, this will be shown until the CSS is loaded dynamically, causing an ugly effect. To avoid it, include the CSS in the header of the Reveal.js presentation, with this line:
<link rel="stylesheet" href="plugin/title-footer/title-footer.css">
Plugin initialization
Include Reveal.js-Title-Footer among the Reveal.js plugin initializations, like this:
Reveal.initialize
(
{
...
dependencies:
[
...
{ src: 'plugin/title-footer/title-footer.js', async: true, callback: function() { title_footer.initialize(); } }
]
}
);
Customization
The title_footer.initialize
function can take two parameters:
title
: the title to show in the footer; ifnull
, it will take theh1
,h2
andh3
elements of the first slide.background
: a string of the form'rgba(0,255,0,0.1)'
, for the background colour of the footer.
For further customization (like making the footer a header, for example), arrange the plugin/title-footer/title-footer.css
file accordingly.
Use
Title
The Reveal.js-Title-Footer plugin takes the first h1
, h2
and h3
tags from the first slide as the title, if another title is not explicitly passed as parameter in the initialization.
Exclusion from slides
The Reveal.js-Title-Footer footer will not be shown in a slide if the corresponding section has a data-state
attribute with a value of no-title-footer
.
Compatibility with Reveal.js-TOC-Progress
If the Reveal.js-TOC-Progress is also used, the Reveal.js-Title-Footer footer is shown just above it. For not showing any of them in a slide, include a data-state
attribute with a value of no-toc-progress
in the corresponding section.
Links
- Source code on GitHub: https://github.com/e-gor/Reveal.js-Title-Footer
- Demo presentation with Reveal.js-Title-Footer: http://e-gor.github.io/Reveal.js-Title-Footer/demo
License
GPL v3 (http://www.gnu.org/copyleft/gpl.html).