Geek Answers Handbook

Set show.js presentation header and footer

I want to set the header and footer in my presentation. As a starting point, I used the following problem: https://github.com/hakimel/reveal.js/issues/806 and http://www.ciges.net/revealjs_demo/#/

My current implementation gives the following result: enter image description here

Now, as I understand it, open.js uses a fixed size for the presentation by default with a width of 960 pixels and a height of 700 pixels.This size is completely suitable for me. However, I want the headers and footers not to snap in this window. They need to adapt to the actual screen size. That is, I want the left title to be aligned in the upper left corner of the screen. Similarly for other headers and footers, see also image. How can i achieve this? Currently it seems that my headers and footers are fixed in the default window (960x700).

I am using the following code (index.html) with show.js 3.2.0

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js – The HTML Presentation Framework</title> <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> <meta name="author" content="Hakim El Hattab"> <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, minimal-ui"> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/simple.css" id="theme"> <!-- Code syntax highlighting --> <link rel="stylesheet" href="lib/css/zenburn.css"> <!-- Printing and PDF exports --> <script> var link = document.createElement( 'link' ); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; document.getElementsByTagName( 'head' )[0].appendChild( link ); </script> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> <style type="text/css"> .reveal div.header-left { position: absolute; top: 0; left: 0; padding: 0; margin: 0; } .reveal div.header-right { position: absolute; top: 0; right: 0; padding: 0; margin: 0; } .reveal div.footer-left { position: absolute; bottom: 0; left: 0; padding: 0; margin: 0; } .reveal div.footer-right { position: absolute; bottom: 0; right: 0; padding: 0; margin: 0; } </style> </head> <body> <div id="hidden" style="display:none;"> <div id="header"> <div class="header-left">test header left</div> <div class="header-right">test header right</div> <div class="footer-left">test footer left</div> <div class="footer-right">test footer right</div> </div> </div> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section> <h1>Reveal.js</h1> <h3>The HTML Presentation Framework</h3> <p> <small>Created by $x^2$ <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small> </p> </section> <section> <h2>Hello There</h2> <p> reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. </p> </section> <!-- Example of nested vertical slides --> <section> <section> <h2>Vertical Slides</h2> <p>Slides can be nested inside of each other.</p> <p>Use the <em>Space</em> key to navigate through all slides.</p> <br> <a href="#" class="navigate-down"> <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section> <h2>Basement Level 1</h2> <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p> </section> <section> <h2>Basement Level 2</h2> <p>That it, time to go back up.</p> <br> <a href="#/2"> <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"> </a> </section> </section> </div> </div> <script src="lib/js/head.min.js"></script> <script src="js/reveal.js"></script> <script> // Full list of configuration options available at: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: false, progress: true, slideNumber: true, history: true, center: false, transition: 'slide', // none/fade/slide/convex/concave/zoom math: { mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js', config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html }, // Optional reveal.js plugins dependencies: [ { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'plugin/zoom-js/zoom.js', async: true }, { src: 'plugin/notes/notes.js', async: true }, { src: 'plugin/math/math.js', async: true } ] }); </script> <script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript"> var header = $('#header').html(); if ( window.location.search.match( /print-pdf/gi ) ) { $('.slides > section').prepend(header); } else { $('.slides').prepend(header); } </script> </body> </html>
+4
javascript html css presentation
source share
2 answers

Here is a slightly more complex answer that also works with the pdf export version:

Add elements to slide-background <div> (instead of section , slides or reveal ). This <div> is dynamically generated, so we must wait for the Reveal.js ready event. When printing, there is a slight delay, followed by unnecessary animation of the headers and footers, but all headers and footers are displayed in PDF format as desired.

Pseudo Code:

  • Header header / footer <div> therefore they are located as desired.
  • Create hidden header / footer <div>
  • In the Reveal.js ready event, copy header / footer <div> to each .slide-background <div>

Code:, this can be copied to the end of the opens.js file (right before the </body> tag):

 <style type="text/css"> /* 1. Style header/footer <div> so they are positioned as desired. */ #header-left { position: absolute; top: 0%; left: 0%; } #header-right { position: absolute; top: 0%; right: 0%; } #footer-left { position: absolute; bottom: 0%; left: 0%; } </style> <!-- 2. Create hidden header/footer <div> --> <div id="hidden" style="display:none;"> <div id="header"> <div id="header-left">HEADER-LEFT</div> <div id="header-right">HEADER-RIGHT</div> <div id="footer-left">FOOTER-LEFT</div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript"> // 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div> var header = $('#header').html(); if ( window.location.search.match( /print-pdf/gi ) ) { Reveal.addEventListener( 'ready', function( event ) { $('.slide-background').append(header); }); } else { $('div.reveal').append(header); } </script>
+7
source share

Insert the header / footer elements in the div.reveal element instead of the .slides slides element.

The position in the DOM tree where you insert the header / footer elements affects the CSS, which in turn affects their positioning.

  • $('.slides').prepend(header) adds elements inside the slides <div>. Elements will be anchored to the default window (960x700) because it is like a slides <div> size.
  • $('div.reveal').append(header) adds elements inside reveal <div>. Elements will be attached to the screen because the reveal <div> is sized to display the entire browser viewing port.

Please note that this does not work for the print / pdf version ... I'm still trying to figure out one of them ...

0
source share

More articles:


All Articles