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:
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
0 comments: