Set header and footer reveal.js presentation

Question

I want to set a header and footer in my presentation. I used the following issue as a starting point: https://github.com/hakimel/reveal.js/issues/806 and http://www.ciges.net/re

Answer 1

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

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

• $('.slides').prepend(header) adds the elements inside the slides <div>. The elements will be fixed to the default (960x700) window because that is how the slides <div> is sized.
• $('div.reveal').append(header) adds the elements inside the reveal <div>. The elements will be fixed to the screen because the reveal <div> is sized to take up the entire browser view port.

---

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

Answer 2

Here is a slightly more complicated answer that also works with the pdf-export print version:

Add the elements to the 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 moving into place, but all the headers/footers are rendered in the PDF as desired.

Pseudo-code:

1. Style header/footer <div> so they are positioned as desired.
2. Create hidden header/footer <div>
3. On Reveal.js ready event, copy header/footer <div> into each .slide-background <div>

Code: this can be copy-pasted into the end of a reveal.js file (right before the end </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>