Pause Marquee Using Java Script

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

JonnyBC

Hi people,

I'm new to JS and but I really need to help with this:

I have a scrolling marquee on my page.

What I want to do is to be able to stop and start the scrolling of the marquee by the use of a button on the page.

I know I can do this already be using onMouseOver effect like this:

<marquee onMouseOver="this.stop();" onMouseOut="this.start();" behavior="scroll" direction="up" scrollamount="2"><p>Some Text</p><p>Some Text</p><p>Some Text</p></marquee>

However this is not really the effect I want.

What I want the user to be able do is to stop and start the marquee by clicking on a button(s) on the web page.

Please can some one help me out with this, I'm a newbe, so if you can help please bear with me and explain in a little detail.

Much thanks.

vwphillips

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function StopStart(b,id){
 var obj=document.getElementById(id);
 b.value=='Start'?obj.start():obj.stop();
 b.value=b.value=='Start'?'Stop':'Start';

}
/*]]>*/
</script></head>

<body>
<marquee id="tst" onMouseOver="this.stop();" onMouseOut="this.start();" behavior="scroll" direction="up" scrollamount="2" style="width:100px;border:solid red 1px;" ><p>Some Text</p><p>Some Text</p><p>Some Text</p></marquee>

<input type="button" name="" value="Stop" onmouseup="document.getElementById('tst').stop();"/>
<input type="button" name="" value="Start" onmouseup="document.getElementById('tst').start();"/>
<br />
<br />
<marquee id="tst1" behavior="scroll" direction="up" scrollamount="2" style="width:100px;border:solid red 1px;" ><p>Some Text</p><p>Some Text</p><p>Some Text</p></marquee>
<input type="button" name="" value="Stop" onmouseup="StopStart(this,'tst1')"/>
</body>

</html>