Start/stop CSS marquee with a play/pause button?

user_12217099 0
Viewed 383

This appears it would have been easier using the HTML marquee, but all of that looks outdated.

I have a CSS marquee class given to me, as well as a play/pause button that sits to the right of it.

    <body>
        <div class="newsDiv">
            <div class="left">Latest</div>
            <div id="news" class="marquee"></div>
            <img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">
        </div>
        <div id="detail" class="detail">

        </div>
    </body>

.marquee,.marquee_paused {
    overflow: hidden;
    white-space: nowrap;
    -webkit-animation: marquee 20s linear infinite;
    -moz-animation: marquee 20s linear infinite;
    animation: marquee 20s linear infinite;
}

.marquee_paused{
     -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
     animation-play-state: paused;
}

/* Make it move */
@-webkit-keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -100% }
}

/* Standard syntax */ 
@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -100% }
}

And then this code here, which toggles my play button. I assumed it would be a good place to play/pause the marquee as well, but it's not working as expected.

function toggle(image) {

  if (image.getAttribute('src') == "data/pause.png") {

    image.setAttribute('src', 'data/play.png');
    $("#marquee").removeClass("marquee_paused")
  } else {

    image.setAttribute('src', 'data/pause.png');
    $("#marquee").removeClass("marquee")
    $("#marquee").addClass("marquee_paused")
  }
}

I'm not sure what another option might be?

Thanks!

css html jquery javascript
1 Answers

Ah, found the answer (and perhaps someone can elaborate on why this works as opposed to using JQuery).

function toggle(image) {

  if (image.getAttribute('src') == "data/pause.png") {

    image.setAttribute('src', 'data/play.png');
    document.getElementById("news").setAttribute("class", "marquee_paused");
  } else {

    image.setAttribute('src', 'data/pause.png');
    document.getElementById("news").setAttribute("class", "marquee");
  }
}

Trying to do what I thought was the same thing with JQuery wasn't working out, but this works just fine!

user_122170990
Related