Using Buttons To Specify The Speed Of Marquee

When it comes to controlling the speed of a marquee, you can give your website users the ability to control it. Using the Button HTML tag along with the onClick event handler, this is achievable.

---

---

So take your time and study the code, and because of novice, I have added comment which will explain the code more.

<!--specify that the <p> should be marquee--> 
<marquee behavior="scroll" direction="left" scrollamount="6" id="mymarquee">
<p>Press a button to change the speed!</p>
</marquee>
 
<!--the "onClick" event handler is use to specify that something should happen when the button is click-->
<button onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 1, 0);"> Slower </button>

<!--the "document.getElementById('mymarquee') is used to specify that the event that will happen should apply to the HTML element whose ID is mymarquee -->
<button onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 6, 0);"> Normal Speed </button>

<!--the ".setAttribute('scrollamount', 12, 0);" is what is used to determine the speed of the marquee when the button is clicked. Note that the higher the number, the faster the marquee speed-->
<button onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 12, 0);"> Faster </button>

That is just the simple way of creating a marquee for a webpage and then giving visitors to the webpage the ability to determine how fast or how slow the marquee should move.


Also Read:

• Creating Auto Scrolling Element Using HTML
• How To Manipulate The Speed Of The Marquee HTML Tag
• Working With border-radius CSS3 Property
• How To Style Visited Links With CSS
• The Code/HTML Entities For Adding Three Dot/Ellipsis "..." To Words (Tips To Website Developers)The Code/HTML Entities For Adding Three Dot/Ellipsis "..." To Words (Tips To Website Developers)

Team +Pinfoltd

---

SHARE THIS