DEVELOPING MINDS THROUGH THE EXPLORATION OF SCIENCE AND TECHNOLOGY

Ticker Tape Scrollers

Right, you've all seen ticker tapes scrollers used for news bulletins and the such like. Here's the code to animate three different variations. In the script they all use the same message, but each requires it's own global variables.

<a name="first">First anchor</a><br>
<br><br>
<a name="first2">First anchor</a><br>
<br><br>
<a name="first3">First anchor</a><br>

<br><br>


<script type="text/javascript">

//   MESSAGE
var ss = String.fromCharCode(160);   //   space!
var scroller_pre = ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss + ss;
var scroller_msg = scroller_pre + 'This is the message that needs to be told...';

//   VERSION 1
var scroller_delay = 250;
var scroller_pos = 0;

function scroller()
{
   ilen = scroller_msg.length;
   scroller_pos++;
   if (scroller_pos >= ilen)
   {
      scroller_pos = 0;
   }
   msg = scroller_msg.substring(scroller_pos, ilen);
   document.anchors['first'].innerHTML = msg;
   var t=setTimeout ('scroller()', scroller_delay);
}


//   VERSION 2
var scroller_delay2 = 250;
var scroller_pos2 = 0;
var state2 = 0;

function scroller2()
{
   ilen = scroller_msg.length;
   if(state2==0)
   {
      scroller_pos2++;
      if (scroller_pos2 >= ilen)
      {
         state2 = 1;
      }
   }
   else
   {
      scroller_pos2--;
      if (scroller_pos2 <= 0)
      {
         state2 = 0;
      }
   }
   msg1 = scroller_msg.substring(scroller_pos2, ilen);
   msg2 = scroller_msg.substring(ilen-scroller_pos2, ilen);
   document.anchors['first2'].innerHTML = msg1 + '<br>' + msg2;
   var t=setTimeout ('scroller2()', scroller_delay2);
}


//   VERSION 3
var scroller_delay3 = 250;
var scroller_pos3 = 0;
var state3 = 0;

function scroller3()
{
   ilen = scroller_msg.length;
   scroller_pos3++;
   if (scroller_pos3 >= ilen)
   {
      scroller_pos3 = 0;
   }
   var start = scroller_pos3;
   var end = ilen - (ilen - scroller_pos3);
   if(end<0) { end = 0; }
   msg1 = scroller_msg.substring(start, ilen);
   msg2 = scroller_msg.substring(0, end);
   document.anchors['first3'].innerHTML = msg1 + msg2;
   var t=setTimeout ('scroller3()', scroller_delay3);
}

//   START THEM
scroller();
scroller2();
scroller3();

</script>

At the end of the script we call the scroller functions to start them animating. However if you were to put the script in the head block then these could go in the body's onload tag like this:

<body onload="scroller();scroller2();scroller3();">

Back

By rabbit Created on 18th of April 2010, at 10.55 pm
Modified on 21st of June 2010, at 8.25 pm
Category: Javascript: General

rabbitin on again!

Other Docs by rabbit

   system and popen
   Ticker Tape Scrollers
   Javascript Regular Expressions
   Simple Popup Dialogues
   Matrix

View all

COMMENTS

Search Docs

Latest Docs

   system and popen
   Ticker Tape Scro...
   Javascript Regul...
   Simple Popup Dia...
   Matrix

Browse Docs

	Programming
	C
	C++
	Python
	Tcl/Tk
	Java
	PHP
	Perl
	HTML
	Javascript
	Other
	Computing
	Linux
	Windows
	Security
	Networks
	Graphics
	Gaming
	Other