|
|
A scroller is text which scrolls on the status bar of the browser. Take a
look at your status bar to see my scroller. Scrollers are very popular
with JavaScript authors (esp. newbies like ourselves) and equally unpopular
with the rest of the Web community.
Programming the ScrollerHow much programming does it take to create
a scroller? Twenty lines, to be exact, as you will see. But before we go
into the code, let us understand what features of JavaScript makes the
scroller possible.
First is the ability to write to the status bar using the window.status
property like this:
window.status = "This will appear in the status bar"
The second is the setTimeout() function. This function takes two
parameters. The first is a string specifying the JavaScript statement to
be executed on triggering and the second is a number specifing time in
milliseconds after which triggering occurs.
Our scroller is essentially a function which, on each invocation, moves
the text on the scroll bar a little to the left and then calls
setTimeout() to invoke itself after a small interval of time.
Here is the complete code for the scroller.
<SCRIPT LANGUAGE="JavaScript">
<!-- Start of scroller script
var scrollCounter = 0;
var scrollText = "Any text here";
var scrollDelay = 70;
var i = 0;
while (i ++ < 140)
scrollText = " " + scrollText;
function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
scrollCounter = 0;
setTimeout("Scroller()", scrollDelay);
}
Scroller();
// End of scroller script -->
</SCRIPT>
The only other function we use is substring() which is a method of
the string object. If name="JavaScript", then
name.substring(4,9) will return "Script". You get the general
idea, right?
Getting the Scroller on your page
If programming is not one of your strong points, you can still have the
scroller on your page. Just copy the above code into your HTML file,
preferably between <HEAD> and </HEAD> tags and change the
scrollText and scrollDelay variables in lines 4 & 5 to suit
yourself.
|