Start/stop gifs?

Help
1

I’m trying to get my stop/start gifs script to work and it will not. lol Here is my code https://codepen.io/Katrina-Stautihar/pen/YPyEZoY

I feel like I’m just putting things in the wrong places but I’ve also made this webpage from nothing in 1 day so I’m still pretty proud. /humblebrag

Anyway, thank you for any help!

1 Like
2

Move this bit from your <head> and make it the the last thing before </body>:

<script>
const manual = new Freezeframe('.freezeframe', {
  trigger: false
});

document
  .querySelector('.start')
  .addEventListener('click', () => {
    manual.start();
  });

document
  .querySelector('.stop')
  .addEventListener('click', () => {
    manual.stop();
  });
</script>

Note those two class definitions in there, .start and .stop; those have to be your buttons. Right now you’ve got id and have renamed your buttons, so they’re not doing anything. If you code them like this:

  <p><button class='start' type='button'>Play GIFs</button>
<button class='stop' type='button'>Stop GIFs</button></p>

It should work.

Oh, and if you want your GIFs to play by default rather than be paused by default, just add

setTimeout(() => {
    manual.start()
}, 2000)

right before </script> in that same bit. Due to peculiarities of the script, it needs a little wait (2 seconds in this case) before running the start command for everything to work.

1 Like
3

You’re amazing, that worked! Thank you so much!!!

1 Like
4

Instead of making a whole new post, I’m trying to figure out how to make it so if you click a new link to a page, it just stays on this page and the content inside the book changes. I know it has something to do with anchors? But I want the content hidden until the link is clicked, not just have it jump to a part of the page. I hope that makes sense, maybe you can help me with it! Thank you!

5

The JS free way to do it is with an iframe, so a page within the page.

I am not great at JavaScript, so I think there may be some people here who are better equipped to help you get into the weeds with that one. I do know that cfb-exe has something like what you’re after (and the script is here). You could save the page and the script, open it up and reverse engineer it for your own application - that’s how I often approach the dread JavaScript anyway.

6

Okay, I appreciate the help! :) Thank you!

7

It looks like you got this working with your start/stop buttons. I just wanted to add that I used this method which uses the prefer-reduced-motion query to stop animated gifs if a user’s browser has that setting turned on.

1 Like