Creating a dot-matrix scroller using JavaScript

Don't worry if you don't understand it - you don't need to know any of this stuff if you just want to use it on your site! In fact, I'm writing this explanation two months after I first created the scroller and I'm having trouble with it!

A text string contains the message to be displayed. A variable is set with the number of 'cells' or characters that can be displayed at one time. A JavaScript function is set to run by default, every 130milliseconds. Every time it is called, this function takes X number of characters from the string starting at position Y, where X is the number of times the function has been called. So the first time around it takes one character, the second time around it takes 2 characters etc.

What's Y you're saying. Suppose there are 8 cells in the display. The message is "Hello world" which is 11 characters long. We can only show 8 at a time. For the first 8 loops of the function, the starting position or offset, Y is going to be 1, the first character in the message. On the ninth loop however, we can drop the first character because it has effectively scrolled off the left hand side of the display. This is achieved by increasing the offset variable by 1. Now on the ninth loop it takes characters 2 to 9 from the message.

Loop	No of chars	Offset	Message
first time second time third time fourth time fifth time sixth time seventh time eighth time ninth time tenth time eleventh time	1 2 3 4 5 6 7 8 8 8 8	1 1 1 1 1 1 1 1 2 3 4	H He Hel Hell Hello Hello Hello W Hello Wo ello Wor llo Worl lo World

After the eleventh time, the offset will still go up by 1, but because we have reached the end of the message, spaces are needed to pad out the string to 8 characters (so we don't have to write more code for shorter strings).

Once we have got the right string it needs to be displayed. First get the length. On our example above, the first 7 times the loop runs the length will be less than 8, but because the string hasn't started scrolling yet this is not a problem. A loop now runs displaying each character in position, starting from the right hand side. It gets the ascii code of each character and retrieves the relevant GIF file. For example, the ascii code of capital A is 65, so 65.gif is displayed whenever a capital A is in the string. When it gets to the end of the message it has spaces added to allow it to scroll off the left hand side and disappear - before starting over again.

There's one small problem with the scroller with regards to the Netscape browser. The scroller code gets called every x number of milliseconds (the default is 130) by using the SetInterval command. Internet Explorer is quite good at keeping time and the scroller moves along quite consistently but unfortunately Netscape's timekeeping is not so good and the scroller isn't as smooth as it could be.