0

Using Jupyter Notebook to prepare a slideshow,

I would like when a new fragment becomes visible, to trigger a property change (for example text color or font-size) on a previously shown fragment.

If it requires addEventListener could you provide a working example for a jupyter notebook?

enter image description here

Lefteris
  • 33
  • 7

1 Answers1

1

This is what I found:

EDIT: How do (can) I use a custom.js file under Jupyter notebook?

Tag the target element and the trigger element with an id:

code:

<p id="target"> This text will become red and then green.</p>
<p class="fragment" id="trigger"> When this appears, the previous fragment will change color. When it disappears it will change color again</p>

screenshot:enter image description here

We need to add an event listener that listens to the 'fragmentshown' event. The eventlistener can not be in the Jupyter cell since cell contents are loaded before Reveal is initialized.

Next convert to slides (for the notebook called test.ipynb):

jupyter-nbconvert test.ipynb --to slides --post serve

Next open the slides file test.slides.html with a text editor. At the bottom of the file we find the require() function that contains the Reveal initialization. Inside there (after the initialization) append the following commands:

code:

Reveal.addEventListener('fragmentshown', function( event ) {
        if(event.fragment.id === 'trigger') {  document.getElementById("target").style.color = "red";}
} );
Reveal.addEventListener('fragmenthidden', function( event ) {
        if(event.fragment.id === 'trigger') {  document.getElementById("target").style.color = "green";}
} );
Lefteris
  • 33
  • 7