Turn on & off Marquee using JS

I am using code something like

<marquee behavior="slide" direction="up" scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 3, 0);">
<div id="mdivx">
    <a href="art.php?code=W1"><img src="im/tart/W1.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W2"><img src="im/tart/W2.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W3"><img src="im/tart/W3.jpg" width="75px" align="middle"></a><br/><br/>                                                          <a href="art.php?code=W4"><img src="im/tart/W4.jpg" width="75px" align="middle"></a><br/><br/><a href="art.php?code=W5"><img src="im/tart/W5.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W6"><img src="im/tart/W6.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W7"><img src="im/tart/W7.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W8"><img src="im/tart/W8.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W9"><img src="im/tart/W9.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W10"><img src="im/tart/W10.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W11"><img src="im/tart/W11.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W12"><img src="im/tart/W12.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W13"><img src="im/tart/W13.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W14"><img src="im/tart/W14.jpg" width="75px" align="middle"></a><br/><br/>
</div>
</marquee>

I want to use a button so that when I click on that button marquee has to start and when I click on off button marquee has to stop. Can I achieve this using JavaScript?

Answers


Scroll bar are displayed when you stop marquee . Used jQuery version 1.9.1

HTML

<marquee behavior="slide" direction="up" scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 3, 0);"id="mymarquee">
<div id="mdivx">
    <a href="art.php?code=W1"><img src="im/tart/W1.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W2"><img src="im/tart/W2.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W3"><img src="im/tart/W3.jpg" width="75px" align="middle"></a><br/><br/>                                                          <a href="art.php?code=W4"><img src="im/tart/W4.jpg" width="75px" align="middle"></a><br/><br/><a href="art.php?code=W5"><img src="im/tart/W5.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W6"><img src="im/tart/W6.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W7"><img src="im/tart/W7.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W8"><img src="im/tart/W8.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W9"><img src="im/tart/W9.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W10"><img src="im/tart/W10.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W11"><img src="im/tart/W11.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W12"><img src="im/tart/W12.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W13"><img src="im/tart/W13.jpg" width="75px" align="middle"></a><br/><br/>
    <a href="art.php?code=W14"><img src="im/tart/W14.jpg" width="75px" align="middle"></a><br/><br/>
</div>
</marquee>
<div id="mdivx1">
</div>
        <br/> <input type="button" value="Stop Marquee" id="stop">
<input type="button" value="Start Marquee" id="start">

CSS

#mdivx1
{
    display:none;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    height:200px;
}

jQuery

$(document).ready(function(){
    $('#mdivx1').hide();
    $('#stop').click(function(){
        $('#mymarquee').hide();
        $('#mdivx1').show().html($('#mdivx').html());
    });
    $('#start').click(function(){
        $('#mymarquee').show();
        $('#mdivx1').hide().html();
    });
});

Working Demo http://jsfiddle.net/cse_tushar/VXm5W/


CODE

<marquee behavior="scroll" direction="left" id="mymarquee"> <p>Go on... press the button!</p> </marquee> <input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();"> <input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">

Working Demo http://jsfiddle.net/cse_tushar/r4QpN/


Need Your Help

Check JSON string from AJAX response with jQuery

jquery ajax json

I've using jQuery on my contact form for a web app we're building, I am getting a JSON response from the server which is:

Spin - Formal Verification

model-checking spin

Has anyone have contact with model checking with this tool SPIN, even more any information of model checking (concurrent programs)