revealjs presentation: hiding footer and slide menu control for a specific slide

[aborruso]

Hi,
is it possible to hide the footer and slide menu control (the one you have a the bottom left), only for a slide?

It could be very useful especially for a slide that uses a full background image.

Thank you

[jjallaire]

This isn't possible right now --- if it was a simple CSS directive we could do it easily. Sadly the footer is in an entirely different layer so can't respond to CSS selectors on the main slide.

[jjallaire]

Note that the the slide probably already has a class on it indicating it has a dark background (haven't checked to be sure though) so you might not even need the .no-chrome class

[aborruso]

Yup, that makes perfect sense. Here's what I thought. I haven't done extensive testing, but the following works for me:

I have tested, but applying .no-chrome I have always the footer.

I have also tried to change the name of the class from slide-number to footer, but the footer still remains visible.

Thank you

<script>
  Reveal.on('ready', () => {
      Reveal.on( 'slidechanged', event => {
          if (Array.from(event.currentSlide.classList).indexOf("no-chrome") !== -1) {
              document.querySelector("div .footer").style.visibility = "hidden";
          } else {
              document.querySelector("div .footer").style.visibility = null;
          }
      });
  })
</script>

[jjallaire]

I don't think that was intended as a literal "paste in this code and you'll get the behavior you want". @cscheid was just illustrating the general idea of registering a Reveal event handler -- In fact if you just pasted that into a document it wouldn't even run (Reveal not defined JS error) b/c Reveal isn't loaded until after the document body.

The way to really do something like this is with a Reveal plugin, which definitely requires some knowledge of JavaScript and CSS as well as the Reveal DOM structure and event system. So the net is that this is possible if you know JS/CSS and are willing to put some time in hacking. Failing that we will definitely come back to this later on this year when we do another round of improvements to Reveal.

[aborruso]

I don't think that was intended as a literal "paste in this code and you'll get the behavior you want"

@jjallaire I'm sorry, I didn't understand, thanks.

I thought it was code I could use, because he writes "the following works for me".

Sorry again

[jjallaire]

Actually I am wrong and this is indeed intended as runnable (I missed the part about it being included via include-after-body, that. makes the JS run without errors). But he also notes that this only hides the slide number and there may be other DOM elements you need to go after -- I see that you've attempted to do that and it didn't work. We would (honestly!) love to keep hacking on this and figure it out but are just too tied up with other stuff right now. If you experiment (and esp. if you have some JS/CSS experience) you may be able to get this working. If not, fear not, we will come back to this later on this year and make it easy.

[cderv]

I have field an issue about this feature request to track #1445 as it also came up in #1391 (comment)

[mcanouil]

FYI:

• Opened issue:
  • [FR] Ability to hide footer on specific slides including title-slide #1445
• Related discussions:
  • Reveal.js Presentation: Title slide without page number and logo #557
  • revealjs presentation: hiding footer and slide menu control for a specific slide #825
  • Hide slide menu button when printing slides #4181
  • Way to remove slide-number for n^th slide in a revealjs presentation? #5566

[aborruso]

Thank you very much @mcanouil