12.3 The Status Line

At the bottom of every browser window (except for those we open() without it) is a status line. This is a location in which the browser can display messages to the user. When you move the mouse over a hypertext link, for example, the browser displays the URL that the link points to. And when you move the mouse over a browser control button, the browser displays a simple "context help" message that explains the purpose of the button. You can also make use of this status line in your own programs--its contents are controlled by two properties of the Window object: status and defaultStatus.

We've just said that browsers display the URL of a hypertext link when you pass the mouse pointer over the link. This is generally the case, but in your excursions through the web, you may have found some links that don't behave this way--links that display some text other than the link's URL. This is done with the status property of the Window object, and the onMouseOver() event handler of hypertext links, as shown in Example 12.3.

<!-- Here's how you set the status line in a hyperlink. 
  -- Note that the event handler *must* return true for this to work. -->
Lost? Dazed and confused? Visit the
<A HREF="sitemap.html" onMouseOver="status='Go to Site Map'; return true;">
  Site Map
</A>
<!-- You can do the same thing for client-side image maps.-->
<IMG SRC="images/imgmap1.gif" USEMAP="#map1">
<MAP NAME="map1">
  <AREA COORDS="0,0,50,20" HREF="info.html"
    onMouseover="status='Visit our Information Center'; return true;">
  <AREA COORDS="0,20,50,40" HREF="order.html" 
    onMouseOver="status='Place an order'; return true;">
  <AREA COORDS="0,40,50,60" HREF="help.html" 
    onMouseOver="status='Get help fast!'; return true;">
</MAP>

In Example 12.3 note that the onMouseOver() event handler must return true. This tells the browser that it should not perform its own default action for the event--that is, it should not display the URL of the link in the status line. If you forget to return true, then the browser will overwrite whatever message the handler displayed in the status line with its own URL.

When you move the mouse pointer over a hyperlink, the browser displays the URL for the link, and then erases it when the mouse moves off the hyperlink. The same is true when you use an onMouseOver() event handler to set the Window status property--your custom message will be displayed while the mouse is over the hyperlink, and then will be erased when it moves off the link. Or that is the way it is supposed to work, anyway. In the Windows version of Navigator (but not the Mac or X11 versions), the status line is not automatically cleared when you set the status property from an onMouseOver() event handler. To force it to be erased, you can use the onMouseOut() event handler, like this:

<A HREF="sitemap.html" 
   onMouseOver="status='Go to Site Map'; return true;"
   onMouseOut="status='';">
Site Map
</A>

The status property is intended for exactly the sort of transient message we saw above. Sometimes, though, you want to display a message that is not so transient in the status line--for example, you might display a welcome message to users visiting your web page, or might display a simple line of help text for novice visitors. To do this, you set the defaultStatus property of the Window--this property specifies the default text displayed in the status line. That text will temporarily be replaced with URLs, context help messages, or other transient text when the mouse pointer is over hyperlinks or browser control buttons, but once the mouse moves off of those areas, the default text will be restored.

You might use the defaultStatus property like this to provide a friendly and helpful message to real beginners:

<SCRIPT>
defaultStatus =index.html "Welcome!  Click on underlined blue text to navigate.";
</SCRIPT>

Any time you can programmatically set a value and cause a user-visible change to appear on the screen, the true JavaScript programmer's mind turns immediately to the possibilities of animation--that is of updating a value (that updates the screen) periodically to produce some sort of special effect. In general, animations involving the status bar are gaudy and in very poor taste; shun them!

On the other hand, status bar animation is interesting because it demonstrates important JavaScript programming techniques, including the use of the Window.setTimeout() method. Example 12.4 shows a simple status bar animation (that is in good taste). It displays the current time in the status bar, and updates that time once a minute. Because the update only occurs once a minute, this animation does not produce a constant flickering distraction at the bottom of the browser window like so many others do. Note the use of the setTimeout() method in this example--it causes JavaScript code to be executed after a specified number of milliseconds elapse. It was first introduced in Chapter 10, Client-Side Program Structure. Also note the use of the onLoad() event handler to start the clock running. onLoad() is an event handler of the Window object, and is specified here as an attribute of the <BODY> tag. It was first introduced in Chapter 10, Client-Side Program Structure.

<HTML>
<HEAD>
<SCRIPT>
// This function displays the time in the status line.
// Invoke it once to activate the clock; it will call itself from then on.
function display_time_in_status_line()
{
    var d =index.html new Date();                // get current time;
    var h =index.html d.getHours();              // extract hours: 0 to 23
    var m =index.html d.getMinutes();            // extract minutes: 0 to 59
    var ampm =index.html (h >= 12)?"PM":"AM";    // is it am or pm?
    if (h > 12) h -=index.html 12;               // convert 24-hour format to 12-hour
    if (h ==index.html 0) h = 12;                // convert 0 o'clock to midnight
    if (m < 10) m =index.html "0" + m;           // convert 0 minutes to 00 minutes, etc.
    var t =index.html h + ':' + m + ' ' + ampm;  // put it all together
    defaultStatus =index.html t;                 // display it in the status line
    // arrange to do it all again in 1 minute. 
    setTimeout("display_time_in_status_line()", 60000); // 60000 ms in 1 minute
}
</SCRIPT>
</HEAD>
<!-- Don't bother starting the clock 'till everything is loaded. The
  -- status line will be busy with other messages during loading, anyway -->
<BODY onLoad="display_time_in_status_line();">
<!-- The HTML document contents go here -->
</BODY>
</HTML>

If you write a JavaScript program that performs any sort of lengthy computation, you might decide to use a simple status bar animation to give the user feedback that your program is computing, and is making progress. Without some kind of feedback, there is a danger that the user might think the browser has hung. Unfortunately, this sort of animation won't work. You can update the defaultStatus and status properties at any time, but your specified text won't actually appear in status line until all the JavaScript code that is running completes. Thus, if you attempt to animate the line to indicate progress during a lengthy computation, none of your updates to the status line will actually appear to the user.