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)

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.