Search code examples
javascripthtmlscrollmarqueespacebars

Most efficient way to pause a HTML Marquee without a mouse

As the title says, im needing to pause some scrolling text in a html marquee.

It is used on a small laptop next to the camera as a scrolling script for me to read basically, the scroller works great and is super simple, but obviously i wouldn't be at the laptop so cant stop it if i need to pause if i start rambling on about something else in the middle of the script or whatever reason.

My original thought was to get a small bluetooth keyboard (since there rather cheap) and have it on the floor where i stand which will also leave my hands un-interrupted. I can then pause and play the scroller without any problems.

So i guess the question is, could i pause it with the keyboard spacebar with javascript for example, if so, how?

Here is my marquee (this is a remake of it since the original is on my laptop):

<body style="styles-here">
<marquee style="styles-here" behavior="scroll">
    TEXT TO SCROLL
</marquee>

Any help is appreciated!

Solution

  • You can use the stop and start methods

    var state = 'play';

function toggleMarquee() {
    var marquee = document.getElementById("marq");
    if (state === 'play') {
        marquee.stop();
        state = 'stop';
    } else {
        marquee.start();
        state = 'play';
    }

}
    <marquee id="marq">This text will scroll from right to left</marquee>
<input type="button" onclick="toggleMarquee();" value="Toggle" />

    EDIT

    To add keyboard shortcuts to buttons please see here: How to create a keyboard shortcut for an input button