Learn Advanced JavaScript Programming

Setting a Default Value to Status Bar

You have seen that it is possible to write one-line strings to the status bar via the status property. It is also possible to set a default value to the status bar. This value is kept in the status bar as long as no value is written to it by the status property. The general syntax of this property is window.defaultStatus or defaultStatus. When using this property with an event handler, you must return true.

Take a look at the following example:

<HTML>
<HEAD>
<TITLE>status bar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function statusSetter() {
window.defaultStatus = "Click the link for the Netscape homepage"
window.status = "Netscape homepage"
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://www.netscape.com" onMouseOver = "statusSetter();
   return true">Netscape</A>
</BODY>
</HTML>

Example 18-3 (ex18-3.htm). Sets a default value to the status bar.

When you load the page in the browser, you see one link. At that moment, the status bar does not contain any string (it might contain a string to report that the page has been loaded). When you place the pointer over the link, the message “Netscape homepage” is written to the status bar. When the pointer is taken off the link, the string is replaced by another string—“Click the link for the Netscape homepage.” This is a nice alternative to using the onMouseOut event handler.

Banners

Banners are classic JavaScript scripts. They were and still are an attractive addition to any Web page. The original banners appeared in the status bar, scrolling several messages in sequence. Some prefer to place the banner in a text box, because they feel that status-bar-based banners are annoying to the common surfer. Banners are sometimes very unsteady, their speed is not uniform, and they blink at times. There is no workaround to make them better. But, all in all, they are still a lot of fun. In this section we shall take a look at a few different banner-like scripts, most of which were created exclusively for this book.

T-banner

The T-banner simulates a typewriter. It displays each message by typing it in, one character at a time. It seems as if someone is typing the message at a certain speed, deleting it upon completion. First, take a look at the script:

<HTML>
<HEAD>
<TITLE>T-Banner</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// set speed of banner (pause in milliseconds between characters)
var speed = 100
// decrease value to increase speed (must be positive)

// set pause between completion of message and
// beginning of following one
var pause = 1000 // increase value to increase pause

// set initial values
var timerID = null
var bannerRunning = false
// create global array
var ar = new Array()

// assign the strings to the array's elements
ar[0] = "Welcome to our JavaScript page"
ar[1] = "We hope you enjoy the T-Banner script"
ar[2] = "It is designed to be more stable than regular banners"
ar[3] = "Don't forget to check out our other scripts"

// set index of first message to be displayed first
var currentMessage = 0

// set index of last character to be displayed first
var offset = 0

// stop the banner if it is currently running
function stopBanner() {
 // if banner is currently running
 if (bannerRunning)
   // stop the banner
   clearTimeout(timerID)

 // timer is now stopped
 bannerRunning = false
}

// start the banner
function startBanner() {
  // make sure the banner is stopped
  stopBanner()
  // start the banner from the current position
  showBanner()
}

// type in the current message
function showBanner() {
  // assign current message to variable
  var text = ar[currentMessage]

  // if current message has not finished being displayed
  if (offset < text.length) {
 // if last character of current message is a space
 if (text.charAt(offset) == " ")
// skip the current character
offset++

// assign the up-to-date to-be-displayed substring
// second argument of method accepts index of last char plus one
var partialMessage = text.substring(0, offset + 1)

// display partial message in status bar
window.status = partialMessage

// increment index of last character to be displayed
offset++ // IE sometimes has trouble with "++offset"

// recursive call after specified time
timerID = setTimeout("showBanner()", speed)
// banner is running

bannerRunning = true
   }else {
// reset offset
offset = 0

// increment subscript (index) of current message
currentMessage++

// if subscript of current message is out of range
if (currentMessage == ar.length)
   // wrap around (start from beginning)
   currentMessage = 0

 // recursive call after specified time
 timerID = setTimeout("showBanner()", pause)

// banner is running
bannerRunning = true
   }
}

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="startBanner()">
</BODY>
</HTML>

Example 18-4 (ex18-4.htm). The T-banner.

Global Statements

// set speed of banner (pause in milliseconds between characters)
var speed = 100
// decrease value to increase speed (must be positive)

// set pause between completion of message
// and beginning of following one
var pause = 1000 // increase value to increase pause

// set initial values
var timerID = null
var bannerRunning = false

// create global array
var ar = new Array()

// assign the strings to the array's elements
ar[0] = "Welcome to our JavaScript page"
ar[1] = "We hope you enjoy the T-Banner script"
ar[2] = "It is designed to be more stable than regular banners"
ar[3] = "Don't forget to check out our other scripts"

// set index of first message to be displayed first
var currentMessage = 0

// set index of last character to be displayed first
var offset = 0

Table of Contents