Search This Blog

Friday, February 3, 2017

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>


<!--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:
Team +Pinfoltd



Search This Blog