Search code examples
javascriptjqueryhtmljquery-animatemarquee

Control marquee behavior with buttons using jquery

I want to be able to control marquee behavior with buttons using jQuery.

For example, I create the following buttons and when I click each of them:

1) Start (class=btnStart) => the marquee starts
2) Stop (class=btnStop) => the marquee stops
3) Back (class=btnBack) => the marquee move backward
4) Right (class=btnRight) => the marquee moves to right
5) Fast (class=btnFast) => the marquee moves faster
6) Slow (class=btnSlow) => the marquee moves slower

<body>
  <div>
      <marquee>Lots of contents here, scrolling right to left by default</marquee>
  </div>
  <div>
    <button class="btnStart">Start</button>
    <button class="btnStop">Stop</button>\
  </div>
 <script>
    $(function (){

       $(".btnStop").click(function (){
          $("marquee").stop();// it does not work
        });

        $(".btnFast").click(function (){
            $("marquee").attr("scrollamount","5"); // doesnt change speed
         });
     });
 </script>
</body>
Solution

  • .start() and .stop() methods works only on javascript objects.

    $('marquee') returns a jquery object but you can get the DOM element using indexes.

    $('marquee')[0] returns the HTML element you selected.

    You can use $('marquee')[0].start() or document.getElementById('marquee').start().

    let marquee=document.getElementById('marquee');
$('#btnRight').click(function(){
    marquee.setAttribute('direction','right');
    marquee.start();
});
$('#btnLeft').click(function(){
   marquee.setAttribute('direction','left');
   marquee.start();
});
$('#btnStop').click(function(){
   marquee.stop();
});
$('#btnStart').click(function(){
   marquee.start();
});
$('#btnFast').click(function(){
  marquee.setAttribute('scrollamount',30);
  marquee.start();
});
$('#btnSlow').click(function(){
  marquee.setAttribute('scrollamount',2);
  marquee.start();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<marquee id="marquee" behavior="scroll" scrollamount="10">Hello</marquee>
<button id="btnRight">Right</button>
<button id="btnLeft">Left</button>
<button id="btnStart">Start</button>
<button id="btnStop">Stop</button>
<button id="btnFast">Fast</button>
<button id="btnSlow">Slow</button>