Online Documentation Server
 
ods.com.ua Web
 
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 

 
. , - - , .




Previous Table of Contents Next

Chapter 18
Utilizing the Status Bar

The Status Bar

The status bar is found at the bottom of the browsers 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 mouses 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 mouses 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">

Dont forget to return trueits essential. The following statement creates a link to Netscapes 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>

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us