CODEWITHSUNDEEP
htmlfooterreveal.js
OMMJREN
OMMJREN

Reputation: 57

Reveal.js – Remove globally set footer from single slide

I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.

Below is my current file, with the footer at the end:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>TITLE</title>

    <meta
      name="description"
      content="DESCRIPTION"
    />
    <meta name="author" content="MY NAME" />

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

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/black.css" id="theme" />
    
    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />


  </head>

  <body>
    <div class="reveal">

      <div class="slides">
        <section>
          <a href="https://example.com/">
            <img
              src="images/example.png"
              alt="Example logo"
              style="
                height: 360px;
                margin: 0 auto 4rem auto;
                background: transparent;
              "
              class="logo"
            />
          </a>
          <h4>Title of my presentation</h4>
          <p style="font-size: 30px">
            Subtitle
          </p>
        </section>
        
        <section>
          <section class="center">
              <h2>What goes here?</h2>
          </section>
          <section class="center">
              <p>Lorem ipsum dolor sit amet</p>
          </section>
          <section class="center">
            <pre>
              <code>
                Here is the code
              </code>
            </pre>
          </section>
        </section>
      </div>
    </div>


   <!-- Default plugins -->
    <script src="dist/reveal.js"></script>
    <script src="plugin/zoom/zoom.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/search/search.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>

<script>
      // Also available as an ES module, see:
      // https://revealjs.com/initialization/
      Reveal.initialize({
        controls: true,
        progress: true,
        center: true,
        hash: true,

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [
          RevealZoom,
          RevealNotes,
          RevealSearch,
          RevealMarkdown,
          RevealHighlight,
        ],
      });
    </script>

    <!-- 1. Create hidden footer <div> -->
    <div id="hidden" style="display:none;">
      <div id="footer">
          <div id="footer">Copyright 2022</div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
      // 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
      var footer = $('#footer').html();
      $('div.reveal').append(footer);
    </script>
    
  </body>
</html>

Any tips or suggestions would be greatly appreciated!

Upvotes: 1

Views: 362

Answers (1)

Jocelyn LECOMTE
Jocelyn LECOMTE

Reputation: 895

First, you have a comment that says

On Reveal.js ready event, copy footer

but I can't see that in your code. To me, it seems like a plain append.

Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:

Reveal.on( 'slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...

Upvotes: 1

Related Questions