Chapter Twenty-One
Scrolling Stuff -
On Screen and On the Status Line

There are folks who like to have text messages scrolling across the bottom of the screen. Or jumping or flashing.

Others like to have a text message scrolling in a form element on the page.

Then, too, there are a lot of folks who really hate these moving messages. Unfortunately for this latter group of people, the folks who like them may put them on their pages.

Another potential problem with badly written (as opposed to simply ugly) scroller scripts is that they may be so-called "memory holes". A visitor withvery little excess RAM allocated to his/her browser may be "crashed" after just a minute or so due to the memory allocation being exceeded. (Usually displaying an ERROR type 1 message)

Instead of re-indexing the base registor (assembly language talk), each execution of the script iteration grabs another piece of memory, cumulatively "eating" more and more until the limit is passed.

In deference to these poor visitors who can't afford tons'o'ram, you probably should include a stop button with your scroller scripts if you are going to use them. Unless you like to crash other folks' browsers. It's your call, after all.

Status Line or Form Element Scrollers

It is a simple matter to print a message on the Status line at the bottom of the screen. The call is just this:

msg="Some message on Status Line";
window.status=msg;

The only difference with a scroller in a form element placed somewhere on your page is to define a text element in a form at that position:

msg="Some message in form element";
document.isn.txt.value=msg;

<FORM NAME="isn">
<INPUT TYPE="text" NAME="txt" VALUE=""
SIZE=100>
</FORM>

So, how do you get it to scroll? Consider this approach: Add a hundred or so spaces to the front of the sentence, "Some message on Status Line"

Now, just set up a loop to pull those spaces off, one at a time, reprinting the message on the status line after each removal. To the visitor's eye, the line will appear to be moving from right to left.

Or, conversely, you could simply keep adding one space in front of the sentence and reprinting it to give the appearance of the message sentence moving from left to right.

Other effects can be created, subject only to your imagination -- for example, you can manipulate the spaces to cause letter after letter to "skitter" across the Status Line to join its companions on one side or the other to finally be joined in a readable sentence.

Or, you can cause them to join together in the middle from both sides.

<HTML><HEAD>
<TITLE>Form Element and Status Line Scrollers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
/* If direction variable "dir" = 0, the
    message will scroll from left to right.
    If =1, the message will scroll right to
    left */
var dir=0;
var ctr=0;
 
function loadMsg(){
 msg="My scrolling message";
 msgl=msg.length;
 ctr++;
 if (ctr<10){
  padMsg();
 }
 }
 
function padMsg(){
 while (msg.length<100){
  msg=(dir<1?" "+msg:msg+" ");
  }
 scrollIt();
 }
 
function scrollIt(){
 if (msg.length>=msgl){
 prtIt();
 }
else{
 padMsg();
 }
 }
 
function prtIt(){
 if (dir==0&&msg.substring(0,1)==" "){
  msg=msg.substring(1,msg.length);
  }
 if (dir!=0&&msg.charAt(msg.length-1)==" "){
  msg=msg.substring(0,msg.length-1);
  }
 window.status=msg; // Print Status line
 document.ug.txt.value=msg; // element
 if (msg.charAt(0)!=" "){
  loadMsg();
  }
 else{
  if (hlt==0){
   setTimeout("scrollIt()",100);
  }
 }
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white"><CENTER>
<P><B>Javascript Status Line and Form Element Scrollers
<P>
<FORM NAME="ug">
<INPUT TYPE="text" NAME="txt" VALUE=""
 SIZE=75>
<BR>Stop Scrolling Messages
<INPUT TYPE="radio" NAME="rb" VALUE="a"
 onClick="hlt=1;" CHECKED> Start Scrolling Messages
<INPUT TYPE="radio" NAME="rb" VALUE="b"
 onClick="hlt=0;loadMsg()">
</FORM>
</BODY>
</HTML>

Click Here to See This Script.

© Copyright 1997, John H. Keyes john.keyes@intellink.net