Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reveal.js Presentation with custom headers absolutely positioned to right and left.
<!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
Copy link

noamelf commented May 27, 2015

Hi,
Do you know if it's possible to do the same thing when working with a sourced MD file? like so:

<section data-markdown="something.md" data-separator="---" data-separator-vertical="~~~" 
data-separator-notes="^Note:" data-charset="iso-8859-15">
</section>

@jobechoi
Copy link

jobechoi commented Oct 16, 2021

@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