Chapter 18
Utilizing the Status Bar
The Status Bar
The status bar is found at the bottom of the browser’s window. It exists in all
browsers, including Navigator and IE. It normally displays the current status of the
document being loaded. The status bar is present in every window, unless the window is
opened by a script that explicitly disables the status bar. Figure 18-1 shows the status
bar.
Figure
18-1. The status bar shows the current status of the document
in the window.
The status bar is the gray bar at the bottom that shows the string “Document:
Done.”
In terms of JavaScript, the status bar is a direct property of the window
object. In multiple-frame documents each frame has a property representing the status bar,
but you should only reference one of them to avoid an unwanted collision. The status bar
in JavaScript is generally represented by the status property window.status.
You can also refer to the status bar of the current window via self.status,
because self is actually a property of the window object that is the window
object itself.
Note: You can also refer to the status bar as status instead
of window.status. However, we shall stick with the latter for clarity.
Never try to read the content of the status bar, because such action usually generates
an error, both in Navigator and IE. Setting the value of the status bar is permitted, with
some restrictions.
Writing to the Status Bar
You should avoid writing to the status bar via an immediate script because it normally
does not work. Nonetheless, deferred scripts are used to assign values to this property. A
string is written to the status bar by assigning a value to its property which represents
it in JavaScript. The following document does not write anything to the status bar because
it is an immediate script:
<HTML>
<HEAD>
<TITLE>status bar</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.status = "You cannot see this!"
// -->
</SCRIPT>
</BODY>
</HTML>
Even if you use a function and the onLoad event handler to write something to
the status bar, it does not work, because another property fills that purpose (window.defaultStatus,
discussed later in this chapter). You can assign values to window.status via
buttons, links, and every other event that is triggered by the user. For example, to have
a message displayed when the user clicks a button you can use the following form:
<HTML>
<HEAD>
<TITLE>status bar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showMessage() {
window.status = "Fascinating!"
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="show message" onClick="showMessage()">
</FORM>
</BODY>
</HTML>
Example 18-1 (ex18-1.htm). You can display a string in the status bar as a
reaction to a user-initiated event such as a button click.
Here is a screen capture to show the effect:
Figure
18-2. A custom string in the status bar.
You have probably noticed a fad that developed on Web pages during the last year. When
you place the mouse’s pointer over a link, it displays a short description in the status
bar rather than the URL. A description is usually much more meaningful than a URL. The
event handler that is triggered when the user places the mouse’s pointer over a link is onMouseOver.
The event handler should always return the Boolean value true after the message
is placed in the status bar. The only correct way to assign a message corresponding to a
link in the status bar is to use the following syntax for the link:
<A HREF="URL" onMouseOver="window.status = 'any string'; return true">
Don’t forget to return true—it’s essential. The following statement
creates a link to Netscape’s site and displays a short message when you place the
pointer over it:
<A HREF="http://www.netscape.com" onMouseOver="window.status = 'Get a
copy of Navigator'; return true">Netscape</A>
If you tried it out, you probably noticed that the message remains in the status bar
until the page is unloaded or another string is assigned to replace it.
Take a look at the following example:
<HTML>
<HEAD>
<TITLE>status bar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showMessage(txt) {
window.status = txt
setTimeout("clearMessage()", 2500)
}
function clearMessage() {
window.status = ""
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.netscape.com" onMouseOver="showMessage('Get a
copy of Navigator'); return true">Netscape</A>
</BODY>
</HTML>
Example 18-2 (ex18-2.htm). A script that displays the string in the status
bar for 2.5 seconds.
The setTimeout() method is a possible replacement for the need to return true.
This script is very simple. When the user places the pointer over the link, the function showMessage()
is called with the desired string. The string is assigned to the status property,
and the function clearMessage() is called to clear the status bar after 2.5
seconds, by replacing the current message with an empty string.
A much better way to erase a string written by onMouseOver from the status bar
is to implement the onMouseOut event handler. This event handler serves as an
attribute of a link or client-side image map area, and it is triggered when the mouse
pointer leaves an area or link from inside that area (see Chapter 23, Links, Anchors, and
Image Maps). This outside movement enables us to assign an empty string to the status bar
when the user removes the pointer from the link.
Here is another example:
<A HREF="http://www.netscape.com" onMouseOver="window.status = 'Get a
copy of Navigator'; return true" onMouseOut="window.
status = ''; return true">Netscape</A>