Basic Web Design
 
Intermediate Web Design
 
Advanced Web Design
Web Design Program
 
Scripting Database
 
 
 
  Home
JavaScript
  Today's Date
  Dropdown Menu
  Mouse Over
  Status Bar
  Status Runner
  Background Color
  Script Tester
  Mini-Windows
  Cookies
  Expiration
Java Applets
Available CGI
META Tags
Server Elements

The Status Scroller Function

   
  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 Scroller

How 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.

    

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.

 

 

 

 

 

 
Give us your Questions of Comments!!!