Html - Reusing area of Reveal.js slide

VictoriaStuart
May 5, 2023
358 views
0 votes
2 Answers

I am trying to reuse a region of a Reveal.js HTML slide, such that when you first enter a slide, a title and some introductory text (Lorem …) is present.

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

On successive right-arrow clicks this appears Foo and it’s contents would appear, one line at a time:

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Foo
 • apple
 • banana
 • cake

Once I have cycle through the above, I want to this "Bar" subsection to replace the "Foo" region of the slide (screen).

<TITLE>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bar
 • donut
 • eggs
 • fish

The issues (see animated image, below) are

I can’t seem to fade "Foo" then proceed to "Bar";
The content on the slide is stacked, i.e. "Bar" appears under the "Foo" region of the slide.

<section>
  <h1>My title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="0">Foo</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p>
        <p class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p>
        <p class="fragment current-visible" data-fragment-index="3">• Cake 🍰</p>
      </span>
    </ul>
  </span>

  <span class="fragment fade-out">
    <h3 class="fragment" data-fragment-index="4">Bar</h3>
    <ul>
      <span class="r-stack">
        <p class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p>
        <p class="fragment current-visible" data-fragment-index="6">• Eggs 🍳</p>
        <p class="fragment current-visible" data-fragment-index="7">• Fish 🐟</p>
      </span>
    </ul>
  </span>
</section>

Tags: html reveal.js

Answers

Chosen as BEST ANSWER

OK after much testing I managed a solution.

Notes

Per StackOverflow How to overlay one div over another div I stack elements to get the Reveal.js r-stack to reuse that part of the slide.
I include CSS styles for left-aligned content.
Bullets and headings (<h1>) other than default Reveal.js styles, use problematic: for simplicity I tend to hard-code UTF-8 bullets • , and use CSS to accomplish custom header text (size, weight, ...).
I am a Reveal.js novice; I couldn't see a way to have "Foo" fade in, then fade out when not needed. My clumsy solution was to include it for each of the child content lines ("bullets"), pushing the latter down via CSS.
Animated GIF illustrating the final solution appended (sorry - not aware of a JSFiddle-like playground for Reveal.js).

HTML

<section>
  <h3>Some foods</h3>

  <!-- https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div -->
  <div id="container">
    <div class="position_left">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <div id="subcontainer_1">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="0"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="1"><span id=fsh4>Foo</span></p>
          <p class="fragment current-visible" data-fragment-index="2"><span id=fsh4>Foo</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="1">• Apple 🍏</p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="2">• Banana 🍌</p>
        </span>
      </div>

      <div id="subcontainer_2">
        <span class="r-stack">
          <p class="fragment current-visible" data-fragment-index="3"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="4"><span id=fsh4>Bar</span></p>
          <p class="fragment current-visible" data-fragment-index="5"><span id=fsh4>Bar</span></p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="4">• Cake 🍰</p>
          <p id="nup3ooth" class="fragment current-visible" data-fragment-index="5">• Donut 🍩</p>
        </span>
      </div>

    </div>
  </div>
</section>

CSS

<style>
  /* ---------------------------------------- */
  /* POSITION LEFT                            */
  /* https://github.com/hakimel/reveal.js/issues/1897 */

  .reveal .position_left {
    text-align: left;
  }

  .reveal .position_left p {
    margin: 1.0rem 1.0rem 1.0rem 0.5rem;
    font-size: 1.0rem;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* CONTAINER DIV                            */
  /* https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div */
  #container {
    position: relative;
  }

  #subcontainer_1 {
    width: 100%;
    position: absolute;
  }

  #subcontainer_2 {
    width: 100%;
    position: absolute;
  }
  /* ---------------------------------------- */

  /* ---------------------------------------- */
  /* FONT STYLES                              */

  /* Push the "bullets" down" (order top right bottom left): */
  #nup3ooth {
    padding: 2.0rem 0.0rem 0.0rem 1.0rem;
  }

  /* Note: no space following "span": */
  span#fsh4 {
    font-size: 1.25rem;
    margin: 0.0rem 0.0rem 0.0rem 0.0rem;
  }
  /* ---------------------------------------- */
</style>

(Edit)

- gabriel14
- May 5, 2023 at 3:37 pm
- 0 votes
0
A solution at the bottom. But first, let me explain.

To make the first part:
```
Foo
 • apple
 • banana
 • cake 
```
appear one line at a time, you have to remove r-stack. r-stack is putting things on top of each other.

For the "Bar" part to replace the previous content it has to be on a separate slide – it has to be in a separate <section>. (Maybe there are also other ways, I’m not sure.)

One problem in the code is to use current-visible. This is a class that Reveal.JS uses for its own purposes, it’s better to not touch it.

One last point to note is that there is a list (<ul>) but not use list items (<li>) in it. This is not causing any issue though.

Overall, the below works and is much simpler.
```
<section data-transition="fade-out">
    <h3>Foo</h3>
    <ul>
        <li class="fragment">Apple 🍏</li>
        <li class="fragment">Banana 🍌</li>
        <li class="fragment">Cake 🍰</li>
    </ul>
</section>
<section data-transition="fade-in">
    <h3>Bar</h3>
    <ul>
        <li class="fragment">Donut 🍩</li>
        <li class="fragment">Eggs 🍳</li>
        <li class="fragment">Fish 🐟</li>
    </ul>
</section>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Reusing area of Reveal.js slide

Answers