Scrolling Text

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

Tip Scroll…

Scrollin’, scrollin’, scrollin’… keep them letters scrollin’!

Scrolls are funny things. People either love them or hate them. I happen to be leaning to the side of liking them, as long as the scroll is used properly. That, to me, means scrolling text that is in addition to the page. Don’t make the scrolling text important information. It should act as icing on the cake.

I think the biggest thing about producing good scrolls is the text and the speed. The text should be short enough to read in one scroll. The speed should be fast enough that I could speak it out loud as it scrolls. Scrolls should be short. Novels should not be scrolled. Plus, there should be ample space between the end of one scroll and the start of the next. That said… let’s scroll.

…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> 	 

No Status Bar
The script scrolls in the status bar. I like my scrolls there, but a lot of authors would rather the scroll occur in a text box up in the body of the HTML document. No sweat. This script is easily altered to do just that. After I explain the inner workings of this version, I’ll take a Script Tip and show you how to alter the script to get it to scroll in a text box. Easy, easy.

The Scrolling Text
Well, you’re going to need something to scroll, so let’s make it. These two lines make up the text:

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

The line sets a variable name, space, to a bunch of spaces. See the empty double quotes? Please remember that those spaces are inside of double quotes so they are seen by the computer as a text string. Yes, spaces can make up text strings. Just because you see a space as nothing doesn’t mean the computer sees it as nothing. To the computer, a space is a character just like any other letter or number.

So, why the spaces? The spaces will act as a buffer before one scroll starts and also before the start of the next scroll. If you simply offered a line of text, the text would scroll again and again, each new run butting right up against the end of the other. That would look bad.

The second line of text sets a variable name, ScrollText, to the space variable plus (+) a new text string, “Hey hey! Look at me scrollin’…”. Yes, I misspelled scrollin’ on purpose before anyone writes to tell me I have yet another typo.

Okay, so we have our scrolling text with a long run of spaces before it. You can probably see that this could have all been done by simply adding spaces to the front of the ScrollText variable. Yes, it could have, but I’m trying to make a point here.

Next Time: The Scroll Function