Set Header And Footer Reveal.js Presentation

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/revea

Solution 1:

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):

<styletype="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> --><divid="hidden"style="display:none;"><divid="header"><divid="header-left">HEADER-LEFT</div><divid="header-right">HEADER-RIGHT</div><divid="footer-left">FOOTER-LEFT</div></div></div><scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"></script><scripttype="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>

Solution 2:

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...