JCL's Tutorial On Scrolling Text Along The Status Bar

Note : If you do not see scrolling text along the status bar where Document: Done normally appears after the whole page loads, you are not using a high enough browser. You need Netscape or Internet Explorer 2.0.2 or higher.


Creating Scrolling Text Along The Status Bar

Almost every scroll I see is created by Web Intergration Systems. People copy the source, give Web Intergration credit, and have no idea what it means (me included until I made this script). Since scrolls are very popular, I decided to create my own scroll. After hours of work and frustration, I finally got it and made a much better one. To get the script I have created, click here. Just copy and paste into your HTML document. After you have completed that task, read below for instructions and explanation.

Why My Script Is Better

1. My script is shorter and easier to understand. I'll walk you through it to prove it to you.
2. My script doesn't blink when you move the mouse. It only does that when you put your mouse over a link.
3. You can adjust the speed of the text.
4. You don't need 3 or 4 lines of text. You can, but you don't have to.
5. You also can change the place the text starts.

Breaking Down The Code

<html>

This command tells the computer that the following text will be in the HTML language (Hyper Text Markup Language).

<body onLoad = "scroll(0)" onUnload = "window.defaultStatus = ''">

This tells the computer to do the function scroll() and assign the value of 0 to the variable embedded in the function's parentheses when the page loads. The body onUnload = "window.defaultStatus = ''" tells the computer that the status bar's text should be blank when the mouse cursor is not on a link and the page is not loading, when the user leaves or reloads the page.

<script language = "JavaScript">

All this does is tells the computer the language that is going to be used. This must be included to make the scroll or any other JavaScript work.

<!-- Begin hiding here --

Since some browsers can't read JavaScript, they just read over the JavaScript code as text and show it to the user as text. This fragment of code begins the commenting out of this text if their browser cannot read JavaScript.

// * this script by Jason Schanker (jcheetah@orion.webspan.net)
// * comes from "http://www.webspan.net/~herbs/jcheetah/web_design/javascript/status_scroll.html"
// * You may copy this source freely if credit is given to the author.

These are a bunch of comments which must be left in here if you use this script. The // means comment out. When the computer gets to this part, it skips over it. This is not exactly how it was written in the document source, but it looked ugly with the asteriks on the page so I left all of them out except for the first. The // is used for one line comments.

function scroll(n)
{

The function, scroll(n){ tells the computer that the function, scroll() is going to be defined and the variable n represents a value that should already be defined. In the body onLoad, n is defined as 0.

    var spaces = " ";

    var text = "Place Your Message Here";

    var scrolling_text = spaces + text;

These commands assign variables to strings. Spaces = 100 spaces, text = Place Your Message Here, and scrolling_text = 100 spaces Place Your Message Here. To change the amount of spaces before the text, delete or add spaces inside the "" for var spaces.

    scrolling_text=scrolling_text.substring(n,scrolling_text.length);

This command changes the value of scrolling_text to a substring of scrolling_text. A substring is a part of a string. N is the # of the letter the substring should start with and scrolling_text.length is the number the letter should end with - 1. 0 is the first letter of the string, 1 is the second letter, etc. The first time, n equals 0. Scrolling_text.length is the amount of characters (letters, spaces, periods, etc.) in the variable string, scrolling_text.length. Scrolling_text starts out with having 23 characters (if you are using "Place Your Message Here") so therefore scrolling_text will not change the first time. I can't tell you why you have to subtract 1 from the ending letter # because I do not know myself.

    window.defaultStatus = scrolling_text;

This tells the computer to put the variable string, scrolling_text on the status bar whenever the mouse cursor is not on a link.

    if(scrolling_text.length > 0) n ++;

    else n = 0;

These commands tell the computer to either add one to n or make n equal to 0. If scrolling_text.length is greater than 0, n will equal n + 1. If scrolling_text.length is not greater than 0, n will equal one.

    s = n

    n = setTimeout("scroll(s)", 100);

The first command tells the computer that s equals n's value. The second command hits a few birds with one stone. First it assigns the value of n to the value of s. The reason you need to do this is so when the function repeats itself, it knows what n is equal to (when functions repeat, all values are lost and must be defined all over again). The setTimeout sets a pause before doing the thing in the parentheses, which is to do the function scroll() all over again and assign the value of s to n. The 100 tells how long the pause should be. The value of n is not lost because the function starts while getting the value of n. Since 1000 is equal to a second, 100 is 1/10 of a second. To increase the speed of this scroll, lower the number. To decrease the speed, raise the number.

}

The } ends the function.

// -- End hiding here -->

This ends the commenting out for browsers unable to read JavaScript.

</script>

This command tells the computer that the end of the JavaScript source has been reached. If you do not include this in your document source, the rest of your HTML document will be considered as JavaScript and the computer will not be able to comprehend the rest of the document. Also, the computer will give you Error Alerts.

How This Scroll Works

The scroll is actually a series of still messages. The message displays in the status bar and when the function is repeated, the value of n increases. Because n keeps increasing, the string, scrolling_text gets smaller and smaller. This is because the substring's first letter starts with number n. N increases once every time the function is activated causing the first letter of the string to disappear. When all the letters are gone, the else n = 0 command makes the string, scrolling_text to start with the first letter again starting the scroll all over again. The reason the scroll starts on the end of the status window instead of the beginning is because of the hundred spaces. The reason it appears to be moving is because every 1/10 of a second, one of the letters dissappear and one of the letters that didn't fit in the status window moves towards the start one space every time the function is reactivated (which occurs every 1/10 of a second because of the setTimeout command). The reason a new letter isn't shown every time the text moves towards the start is because the status will not show only part of the word, it must show the whole thing.

JCL's HTML & JavaScript Tutorial
E-Mail Me