Scrolling Text with Start, Stop, Faster, Slower and Change Direction Buttons

Last Edited: 2009-04-15

A text scroller which has buttons to change the speed of the scrolling, to change the direction of the scrolling, and to start and stop the scrolling.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Scrolling Text with Start and Stop Buttons Script</title> <meta name="title" content="Scrolling Text with Start and Stop Buttons Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> var SCROLLING_TEXT_ID = "scrolling_text"; var SLOWER_ID = "scrolling_text_slower"; var FASTER_ID = "scrolling_text_faster"; var CHANGE_DIRECTION_ID = "scrolling_text_change_direction"; var STOP_ID = "scrolling_text_stop"; var START_ID = "scrolling_text_start"; var scroller; (function() { if (window.addEventListener) { window.addEventListener("load", setup, false); } else { window.attachEvent("onload", setup); } function setup() { //The controls should all be input elements (type="button") so that they can be disabled scroller = new Scroller(SCROLLING_TEXT_ID, SLOWER_ID, FASTER_ID, CHANGE_DIRECTION_ID, STOP_ID, START_ID); } })(); //Scroller class function Scroller(id, sid, fid, cdid, stopid, startid) { this.sid = sid; //Remember to disable/enable the input element later on this.fid = fid; //Remember to disable/enable the input element later on this.stopid = stopid; //Remember to disable/enable the input element later on this.startid = startid; //Remember to disable/enable the input element later on this.scrolling_text = document.getElementById(id); var obj = this; document.getElementById(sid).onclick = function(){obj.slower();}; document.getElementById(fid).onclick = function(){obj.faster();}; document.getElementById(cdid).onclick = function(){obj.change_direction();}; document.getElementById(stopid).onclick = function(){obj.stop_scroll();}; //Relies on disabling this button when the scroller is running to stop repeated timeouts from starting document.getElementById(startid).onclick = function(){obj.scroll();}; this.timer = null; this.speed = 250; //1000 = 1 second this.right_to_left = true; this.stopped = true; //Stopped initially this.update_controls(); } Scroller.prototype.scroll = function() { var text = this.scrolling_text.firstChild.nodeValue; this.stopped = false; if (text.length > 0) { //Remove the first character and add it to the end if (this.right_to_left) { text = text.substring(1, text.length) + text.substring(0, 1); } else { text = text.substring(text.length - 1, text.length) + text.substring(0, text.length - 1); } this.scrolling_text.firstChild.nodeValue = text; var obj = this; this.timer = setTimeout(function(){obj.scroll();}, this.speed); } this.update_controls(); } Scroller.prototype.stop_scroll = function() { this.stopped = true; if (this.timer) { clearTimeout(this.timer); } this.update_controls(); } Scroller.prototype.slower = function() { if (this.speed < 451) { this.speed += 50; } this.update_controls(); } Scroller.prototype.faster = function() { if (this.speed > 49) { this.speed -= 50; } this.update_controls(); } Scroller.prototype.change_direction = function() { this.right_to_left = !this.right_to_left; } Scroller.prototype.update_controls = function() { //Update the speed buttons document.getElementById(this.sid).removeAttribute("disabled"); document.getElementById(this.fid).removeAttribute("disabled"); if (this.speed < 50) //Disable faster button { document.getElementById(this.fid).setAttribute("disabled", "disabled"); } else if (this.speed > 450) //Disable slower button { document.getElementById(this.sid).setAttribute("disabled", "disabled"); } //Update the start and stop buttons if (this.stopped) //Disable the stop button and enable the start button { document.getElementById(this.stopid).setAttribute("disabled", "disabled"); document.getElementById(this.startid).removeAttribute("disabled"); } else //Disable the start button and enable the stop button { document.getElementById(this.stopid).removeAttribute("disabled"); document.getElementById(this.startid).setAttribute("disabled", "disabled"); } } </script> </head> <body> <h1>Scrolling Text with Start and Stop Buttons Script</h1> <p id="scrolling_text">Replace This Text With Your Own. </p> <form method="get" action="#"> <p> <input type="button" value="Slower" id="scrolling_text_slower" /> <input type="button" value="Faster" id="scrolling_text_faster" /> <input type="button" value="Change Direction" id="scrolling_text_change_direction" /> <input type="button" value="Stop" id="scrolling_text_stop" /> <input type="button" value="Start" id="scrolling_text_start" /> </p> </form> </body> </html>

The preview will open up in a new window.

Information

If you use this script on any of your web pages then please provide a link back to us.

More free JavaScript Text scripts.

Rate This Script

Rate this script!

Rate This Script
	Excellent!
	Very Good
	Good
	Fair
	Poor

Be Sure To Check Out These Scripts
CSS/JavaScript Drop Down Menu	A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.
PHP Directory List	Displays a list of all files and directories in a directory.

Top of Page

Programmer Central

Free Web Related Scripts, Tutorials, and Generators.

Search

Links

Font Size

Random Script

Support Us

Scrolling Text with Start, Stop, Faster, Slower and Change Direction Buttons

Code

Information

Rate This Script