advertisement -- please support sponsors

gadgets:
scrolling messages (marquees)

Most web programmers use one of three basic approaches to add scrolling messages (marquees) to their web documents:
  1. Display and scroll the text with an embedded Java applet.
  2. Use Microsoft's proprietary marquee tag to produce the desired effect.
  3. Display the text in a form text field and use JavaScript to scroll it, one character at a time.

Java applets

In our opinion, Java applets are the best way to go if you are an experienced Java programmer. Applets can be used to produce a variety of marquee effects and are compatible with a wide variety of systems. However, since Java programming is beyond the scope of this Ask the Pro database, we will not give further details regarding Java implementation. The only reason we are mentioning it here is so that we can tell you that Java applets produce the best results.

Microsoft's marquee tag

Many web publishers are not Java programmers and are looking for an easier alternative. For them, Microsoft's proprietary marquee tag might be a good way to go. Adding scrolling text to a document is as easy as typing it between opening and closing marquee tags, as the following example shows:
<html> <head> <title>scrolling text with Microsoft's marquee tag</title> </head> <body> This text appears above the marquee. <marquee> This is a scrolling marquee message. </marquee> This text appears below the marquee. </body> </html>

(if you are using Internet Explorer)
Microsoft's marquee tag has a variety of useful properties that can be set to control the appearance of the marquee. For more information on these properties, the interested reader is referred to Microsoft's documentation on this tag.

Although Microsoft's marquee tag is a very attractive solution (both in visual appeal and in ease of programming), it is important to understand that it is only supported in Microsoft's Internet Explorer. Frankly put, the marquee tag is a "proprietary gadget extension" to HTML, so there is a chance that Netscape Communications and other browser manufacturers will never support it in their browsers. Because of this, we recommend that you do not use marquee unless your target audience consists solely of web surfers who use Microsoft's proprietary browser.

JavaScript and forms

For those who are not Java programmers and who do not wish to build a "Microsoft Internet Explorer only" web site, JavaScript-enhanced forms are the best alternative. Most of you don't want theory; you want results. So here it is, quick and dirty -- my implementation of a scrolling marquee using a form text field and JavaScript: 
<html>
 <head>
  <title>scrolling text with JavaScript and forms</title>
  <script>

message = "This is a scrolling marquee message.";
initial_delay = 0;
scroll_delay = 75;
max_indent = 50;

function scroll ()
{
    message =   message . substring (1, message . length)
              + message . substring (0, 1);
    document . scrollbox_form . scrollbox . value = message;
    window . setTimeout ("scroll ()", scroll_delay);
}

function start_scroll ()
{
    for (var i = 1; i <= max_indent; i ++)
        message = " " + message;
    scrollbox = document . scrollbox_form . scrollbox;
    window . setTimeout ("scroll ()", initial_delay);
}

  </script>
 </head>
 <body onLoad="start_scroll ();">
  This text appears above the marquee.
  <form name=scrollbox_form>
   <input type=text name=scrollbox size=25>
  </form>
  This text appears below the marquee.
 </body>
</html>

(if your browser supports JavaScript)
Here is a brief summary of some of the parameters appearing in this JavaScript code:
message
This is a string containing the scrolling marquee text.
initial_delay
This is an integer specifying the number of milliseconds the browser should wait before the marquee starts to scroll. Countdown begins after the document has been completely loaded.
scroll_delay
This is an integer specifying the number of milliseconds to pause after scrolling the marquee by one character. Larger values mean slower scrolling.
max_indent
This is an integer specifying the number of spaces that should be inserted at the beginning of the scrolling text string. Adequate spaces should be inserted so that when the string is initially displayed in the text field, none of the message text is visible. As the string is rotated, one character at a time, the extra spaces will disappear from the beginning of the string, causing the message text to gradually come into view.
Here is a step-by-step summary of what happens when this document is loaded:
  1. The browser loads the document and displays the form.
  2. Next, the browser executes the body tag's onLoad event.
  3. This results in a call to the start_scroll function, which performs the following actions:
    1. Insert max_indent space characters into the beginning of the string (as discussed earlier).
    2. Set up a window timeout so that the scroll function is automatically called after initial_delay milliseconds.
  4. Upon completion of the start_scroll function, the browser idles until the timeout period expires.
  5. The expiration of the timeout period causes execution of the scroll function, which performs the following actions:
    1. Use the substring method and some simple "string arithmetic" to rotate the message string by one character.
    2. Display the new, rotated message string in the text field.
    3. Set up a new window timeout so that the scroll function will again be executed after scroll_delay milliseconds.
  6. After returning from the scroll function, the browser idles until the new timeout period expires.
  7. It then executes the the scroll function as indicated in step 5, and the process repeats itself until an external event causes the JavaScript interpreter to stop.
Information about the substring method, the setTimeout method, and the onLoad event handler can be obtained from Netscape Communication's JavaScript Guide.

Charlton Rose
Nov. 4, 1996