Created
April 1, 2014 16:37
Reveal.js Presentation with custom headers absolutely positioned to right and left.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>reveal.js - The HTML Presentation Framework</title> | |
| <meta charset="utf-8"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <link rel="stylesheet" href="css/reveal.min.css"> | |
| <link rel="stylesheet" href="css/theme/default.css" id="theme"> | |
| <link rel="stylesheet" href="lib/css/zenburn.css"> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <!-- ====================== BETWEEN REVEAL AND SLIDES ====================== --> | |
| <header class="left" style="position: absolute; left: 10px;"></header> | |
| <header class="right" style="position: absolute; right: 10px;"></header> | |
| <!-- ====================== BETWEEN REVEAL AND SLIDES ====================== --> | |
| <div class="slides"> | |
| <section class="title"> | |
| <div> | |
| <h1>Main Slide</h1> | |
| </div> | |
| </section> | |
| <!-- Slide --> | |
| <!-- ====================== SLIDE TO THE RIGHT ====================== --> | |
| <section data-state="headright"> | |
| <style>.headright header.right:after { content: "headline"; }</style> | |
| <!-- ====================== SLIDE TO THE RIGHT ====================== --> | |
| <h1>Header to the right</h1> | |
| <ul> | |
| <li>Bullet 1</li> | |
| <li>Bullet 2</li> | |
| <li>Bullet 3</li> | |
| </ul> | |
| </section> | |
| <!-- Slide --> | |
| <!-- ====================== SLIDE TO THE LEFT ====================== --> | |
| <section data-state="headleft"> | |
| <style>.headleft header.left:after { content: "headline"; }</style> | |
| <!-- ====================== SLIDE TO THE LEFT ====================== --> | |
| <h1>Header to the left</h1> | |
| <ul> | |
| <li>Bullet 1</li> | |
| <li>Bullet 2</li> | |
| <li>Bullet 3</li> | |
| </ul> | |
| </section> | |
| <!-- Slide --> | |
| <!-- ====================== SLIDE TO THE LEFT ====================== --> | |
| <section> | |
| <h1>Normal Slide</h1> | |
| <ul> | |
| <li>Bullet 1</li> | |
| <li>Bullet 2</li> | |
| <li>Bullet 3</li> | |
| </ul> | |
| </section> | |
| </div><!-- slides --> | |
| </div><!-- reveal --> | |
| <script src="lib/js/head.min.js"></script> | |
| <script src="js/reveal.min.js"></script> | |
| <script>Reveal.initialize();</script> | |
| </html> |
@noamelf Do you have an idea how to add an input component to each slide, set to a unique ID, for instance the md filename?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Do you know if it's possible to do the same thing when working with a sourced MD file? like so: