Search code examples
javascripthtmlcordovamarquee

Marquee stop on page load and start with button

I have a marquee on the page (that scrolls the page), it scolls directly when you start the page. But i want it to scroll when i push the button, so not to scroll directly. It corresponds with an audio file (song text). What do i need to add to stop the text scrolling directly on the page enter.

This is the marquee:

<marquee behavior="scroll" height="100%" vspace="0%" direction="up" id="mymarquee" scrollamount="0" scolldelay="1000" loop="1"> SONG TEXT GOES HERE </marquee>

and these are the buttons i would like to connect to the above script with the audio function in place so the marquee does not scroll when you enter the page and starts scrolling when you push the play-button and pauses when you click the button again etc.

<div id=audioplay>
<div id="HTML5Audio"><audio id="myaudio"></audio>
<input id="audiofile" type="text" value="" style="display: none;"/>

<img id="off" src="images/general/sound-off.png" width="40" height="32" onClick="show('on'); hide('off'); playAudio(); document.getElementById('mymarquee').start();" alt="on">

<img id="on" src="images/general/sound-on.png" width="40" height="32" onClick="show('pause'); hide('on'); pauseAudio(); document.getElementById('mymarquee').stop();" style="display:none;" alt="off">

<img id="pause" src="images/general/sound-pause.png" width="40" height="32" onClick="show('on'); hide('pause'); playAudio(); document.getElementById('mymarquee').start();" style="display:none;" alt="on">

</div>     
​</div>
Solution

  • By adding the mymarquee.stop() in the body onload the automatic start of the marquee was solved. :-)

    <body onload="document.getElementById('mymarquee').stop();">

    Now we have a working multi-toggle play-button that plays and pauses the audio file and at the same time scroll the song-text (incl. pause as well) of the audio over the complete screen. Works like a charm :-)