Module 12 - Page 09 - Custom Status Bar Messages

Custom Status Bar Messages

When you mouse over a hyper-reference, you usually see the URL of the HREF attribute listed in the status bar at the bottom of the browser window. Have you ever been to a web page where, as you moused over the hyper-references, you saw CUSTOM messages appear in the status bar instead of URLs?

Here is an example page, demonstrating custom status bar messages. The first link on this demonstration page is a regular hyper-reference, which shows its URL in the status bar when you mouse over the link. The second and third links on the page, however, produce custom status bar messages at the bottom of the browser window when you mouse over those links. Spiffy, huh?

There are three things you need to know in order to get this to work, which I will outline here.

First, you will be addressing the status property of the window instance of the Window object, assigning it a string value using the "gets" operator; this will write your message to the status bar for the browser window.

Example:

window.status = "Hi There";

The second thing you need to know is that the WEB BROWSER itself needs to receive a boolean value of true when dealing with onMouseOver and onMouseOut event handlers in combination with the status property of the window object; if the web browser does NOT receive this boolean true value, the status bar does NOT change as it's supposed to. This true value is passed to the browser using the return keyword in the onMouseOver and onMouseOut event handlers.

Example (abbreviated):

onMouseOver="window.status='Hi'; return true;"

The third thing you need to know is that the status property must be set back to an EMPTY STRING value on the onMouseOut event; otherwise, you MAY get your custom status message "stuck" in the status bar until the next onMouseOver event changes it. An empty string is represented by TWO quote marks right next to each other with NO SPACE (either double-quote marks or single-quote marks, depending on context): "" or ''.

Example:

The above example sets the status bar message to "Hi" on the onMouseOver event, and clears the status bar message on the onMouseOut event. Each event handler returns the value, true, back out to the browser by stating the return keyword, followed by the value, true, as the last statement in the event handler.

Now, comes the confusing part. It is very rare for a web page to be dealing ONLY with a custom status message without some other action occuring at the same time, such as an image switch. Your onMouseOver and onMouseOut event handlers, then, will probably be calling a function which will be dealing with all of the commands that you need to have handled.

The follow code would work:

<html>
<head>
<title>Custom Status Bar Message Example</title>
<script type="text/javascript">
<!--
function showStatus(myMSG) {
    window.status = myMSG;
    // other commands here...
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="showStatus('Hi'); return true;" onMouseOut="showStatus(''); return true;">Link Word</a></p>
</body>
</html>

In the above example, I am calling a function called showStatus() which changes the status bar, and then performs some other tasks. After showStatus() is executed, the second line of code in the onMouseOver or onMouseOut event handler is executed, which returns a value of true to the browser.

This is not considered to be a sufficiently elegant solution, however, and is not always used.

The following code is considered to be the MOST elegant solution, and is fairly common.

Example:

<html>
<head>
<title>Custom Status Bar Message Example</title>
<script type="text/javascript">
<!--
function showStatus(myMSG) {
	window.status = myMSG;
	// other commands here...
	return true;
}
//-->
</script>
</head>
<body>
<p><a href="#" onMouseOver="return showStatus('Hi');" onMouseOut="return showStatus('');">Link Word</a></p>
</body>
</html>

In the above example, the onMouseOver and onMouseOut event handlers are going to return (to the browser) whatever value the function showStatus() returns. If you look at the showStatus() function, you can see that it returns a value of true (big surprise). Once showStatus() has finished executing, it returns the value of true to the event handler, essentially "replacing" the call to showStatus() with the value true; this value, then, is returned to the browser via the return keyword preceeding the call to showStatus().

You can see that elegant code sometimes requires the passing and re-passing of values, here and there and everywhere. Review this code sample a few times, possibly drawing out the sequence of where the values get passed and how they get there, until you feel comfortable with the events described above. Once you feel comfortable with this sequence, try coding the example yourself (typing out ALL of the code by hand, to give you the experience).

Escape Characters in JavaScript Strings

In the example shown previously, you may have noticed the apostrophe (') character in the custom status messages. This apostrophe character is also the single-quote (') character which I was using to delineate the beginning and end of string values within event handlers; how did I get an EXTRA single-quote mark within a string delimited by single-quote marks? I used an ESCAPE CHARACTER, just as I would have done in regular HTML (except using different code).

In JavaScript, escape characters/escape sequences are VERY simple. You simply put the backslash (\) character just before the character that you want to escape.

Example (abbreviated):

\' (single-quote escape character)

Example (in context):

onMouseOver="return showStatus('I am Michael\'s example');"

Any character can be escaped by using the backslash before the character within the string delimiters. Only certain specific characters actually need to be escaped, and, of course, you could NOT escape a double-quote mark in the example above because that would still confuse the HTML interpreter. See "JavaScript: The Definitive Guide", section 3.2.2 for more information on escape characters/escape sequences.

Main Menu