The Scroll Function

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Teep…

Moving along with the scroll stuff. We have the text that will scroll, now let’s get it scrolling. But first, the script and its effect:

…and here’s the script:

 
<SCRIPT LANGUAGE="JavaScript">

var space = "                  "
var ScrollText = space + "Hey hey! Look at me scrollin'..."

function SBScroll() 
{

temp = ScrollText.substring(0,1);
ScrollText += temp

ScrollText = ScrollText.substring(1,ScrollText.length);
window.status = ScrollText.substring(0,ScrollText.length);

setTimeout("SBScroll()",100);

}

</SCRIPT> 	 

The scrolling is performed through the function SBScroll(). Like the name? I made it up. It stands for Status Bar Scroll. Man, am I clever.

Let’s look at the first two lines together:

 
temp = ScrollText.substring(0,1);
ScrollText += temp	 

First a variable, temp, is assigned the value of the scrolling text, then the substring method is attached. The method substring() allows you to take only a portion of a text string. In this case we only want to take a letter at a time. That’s what gives us the scrolling effect. The first letter is displayed. Then the next letter in line is added to the right end of the text string again and again. The effect is that the text is scrolling out of the right side of the status bar. See how the scroll is achieved?

The way a substring method works is taking the higher of two variables. Here we are offering the default 0, and 1. Thus one letter at a time to be substring-ed out.

The next line allows the scroll to occur again and again. The sign “+=” is JavaScript shorthand for adding what’s on the right side of the equation to what is on the right side. Thus, the text string ScrollText is added to the substring() (next letter or space) and returned. See how that builds up letter by letter? Without these two lines the scroll would roll through once and that would be that. Nothing new would be added to the text and once it was done scrolling, nothing more.

The next two lines are a little confusing at first. Once we break them down, all will be made clear (so says Swami Joe).

 
ScrollText = ScrollText.substring(1,ScrollText.length);
window.status = ScrollText.substring(0,ScrollText.length); 

The next line sends the output to the status bar. See the “window.status”? That’s what sends the text to the bar.

Now, the lines of text may look the same but they are not. Remember that ScrollText has a new value from the last line of code. Also notice that the first value in the method substring() has changed. Now it’s a zero. Thus no new letter is returned, just the equal to what the last line of code produced. This line basically is meant for getting the text to display.

Finally, this is used to get the script to roll through again and again:

 
setTimeout("SBScroll()",100); 

So… see what’s happening? We’ve set a line of text. We know that line will be displayed in the status bar. But to get the scroll effect we will display that text string letter by letter, again and again. Each time the next letter in the string is added to the right side of the string, it is displayed. When the string runs out of letters, we start again with the first character in the string. Remember that that first character is a space so we have a nice separation between visible text strings.

The script runs again and again every 10th of a second and gives the impression that the text is scrolling from the right rather than simply displaying again and again.

Great effect. Next time I’ll show you how to alter the script so that the text string appears in a text box right on your browser screen. It’s just a few additions and a couple of changes.

Next Time: Get the Scroll in a Text Box