The Ugly JavaScript Book - Chapter Twenty-One

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.forms[0].elements[0].value=msg;


<FORM>
<INPUT TYPE=TEXT 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.forms[0].elements[0].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>
<INPUT TYPE="text" 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.

Links: Introduction | Chapter One | Chapter Two | Chapter Three | Chapter Four | Chapter Five | Chapter Six | Chapter Seven | Chapter Eight | Chapter Nine | Chapter Ten | Chapter Eleven | Chapter Twelve | Chapter Thirteen | Chapter Fourteen | Chapter Fifteen | Chapter Sixteen | Chapter Seventeen | Chapter Eighteen | Chapter Nineteen | Chapter Twenty | Chapter Twenty-two | Chapter Twenty-three | Appendix A | Appendix B | Appendix C | Appendix D | Cover
This free virtual book provided courtesy of:
AutoScripter(tm), the site for professional Web Designers and Developers and
WebWalker Virtual Press, virtual publishing on the Web since 1994
Other free e-books from WebWalker: The All American Terrorists | The Gnomes of Jost | For the Love of Entropy | The Trees of Kratva | The Arch of Rain Magicians | Lightshow | The Black Mancutters Guild | The Septoracle

© Copyright 1997, 1999, 2000, 2001 John H. Keyes
editor@jorika.com