Section 6: The Timeout and the Status Bar

The Timeout

Another important "event" in Javascript is the Timeout event. This event happens after a certain period of time has passed. Unlike other events, the event handler for this event is not set within a tag: we cannot say

<tag onTimeout="instructions">

Instead, we must use a javascript command to set a timeout event:

<SCRIPT>
 setTimeout("MyFunction()",6000);
 setTimeout("AnotherFunction()",2500);
</SCRIPT>

Here, two timers are set. The first will call the function MyFunction() in six seconds (6000 milliseconds), and the second will call the function AnotherFunction() in 2.5 seconds (2500 milliseconds).

Often, this is used by a webmaster who has decided to move his website to a new location. The webmaster moves his or her pages, and then leaves a simple page in the old location, informing visitors of the move, and automatically sending them to the new site. Example 6a shows how this can be done.

<h3>I'm sorry, Example 6a has been moved.</h3>

You can find it at its <b>New Location</b> by following
<a href="eg6.html">this link</a>, or by <b>waiting for 7 seconds</b>.

<script>

  setTimeout( "window.location='eg6.html'" ,7000);

</script> 

Here, the text I'm sorry, Example 6a has moved etc appears first. Then, a single javascript command is issued. This command starts a timer that will run out in 7000 milliseconds (seven seconds). When the timer runs out, the command window.location='eg6.html' will be performed. This will change the location of the browser window object to eg6.html - in other words, the browser will automatically jump to that new location!! Follow This Link to see this example in action.

The Status Bar

Recall Example 5a, where an alert box appeared whenever the user moved the mouse over a link? It became very difficult for the user to actually follow the links, since they had to close the box before they could do anything.

To give the user information about a link, it is much better to use the status bar of the browser window. Netscape already uses the status bar to do this anyway, by displaying the URL that the link "links" to. It also uses the status bar for other things, such as telling the user how much of the document has finished loading, and so on.

We can also use the status bar to give the user information. We do this by setting the status property of the window object. For example, the command

<script>
  window.status = "This text appears at the bottom of the window";
</script>

will cause the text "This text appears at the bottom of the window" to appear at the bottom of the window - in the status bar.

The following example uses onMouseOver and window.status to give the user information about the links that they are about to follow.

<script>

function Paint(MyColour) {
  document.bgColor = MyColour ; /* Change the Background Colour */
}

function Beware(MyColour,MyObject) {
  warning = "This will paint the screen as " + MyColour + " as " + MyObject;
  window.status = warning ; /* Warns the user what is about to happen */
}

</script>

<p>
<center>
<h3>Choose A Background Colour: 
<a href = "javascript:Paint('red')"    onMouseOver="Beware('red','fire'); return true;"      >Fire</a>
<a href = "javascript:Paint('blue')"   onMouseOver="Beware('blue','the deep'); return true;" >Deep</a>
<a href = "javascript:Paint('green')"  onMouseOver="Beware('green','keroppi'); return true;" >Keroppi</a>
<a href = "javascript:Paint('white')"  onMouseOver="Beware('white','snow'); return true;"    >Snow</a>
<a href = "javascript:Paint('black')"  onMouseOver="Beware('black','soot'); return true;"    >Soot</a>
<a href = "javascript:Paint('yellow')" onMouseOver="Beware('yellow','the sun'); return true;">Sun</a>
</h3>
</center>

Follow this link to see this example in action. Function Beware takes two arguments to determine what to display on the status bar. For example, Beware('quickly','possible') would change the status bar to This will paint the screen as quickly as possible.

One more important thing to notice is that each MouseOver event handler has been defined not as one command, but as two. The first is the function call to Paint the screen, the second is the mysterious command return true.

The reason we need to say return true is that the browser already intends to change the status bar when we move the mouse over the links. We have to say return true in order to inform the browser "Hey! Use my status bar instead of the usual one!!".