javascriptjqueryhtmlmarquee

Marquee, change content dynamically and restart scrolling

I have a marquee on my website:

<marquee>Hello! <span id="text">Welcome to my website.</span></marquee>

I want to change dynamically the content of the span with id="text" from marquee:

setTimeout(function() {
  document.getElementById("text").innerHTML = "This is my website. Happy reading!";
}, 5000);
<marquee>Hello! <span id="text">Welcome to my website.</span>
</marquee>

All works well. The problem is that I want to restart the marquee, from the beginning after changing the text. Imagine first text is a longer one, when changing with another, it will not be entirely readable at first scroll; the visitor will see it from middle.

So, I want to restart the marquee scroll from beginning.

Solution

  • Maybe not what you want or expect. But this should restart the marquee.
    I would delete and reinsert the marquee in the DOM with a new element.

    setTimeout(function() {
  document.getElementById("marquee").innerHTML = '<marquee>Hello! <span id="text">This is my website. Happy reading!</span></marquee>';
}, 5000);
    <div id="marquee">
<marquee>Hello! <span id="text">Welcome to my website.</span>
</marquee>
</div>