Free Web Hosting by Netfirms
 Web Hosting by Netfirms | Free Domain Names by Netfirms

Using the status bar

The status bar is the horizontal label placed at the bottom of the window. When you are waiting for a web page to load it normally says "loading" on it. You can show any message you want on it just like the web browser does. You do this by setting text on the statusbar object. This object is actually a sub object of window so you refer to it with dot (.) notation. For example window.status

The following example is going to display a welcome message on the statusbar as soon as the web page loads Run Code | View Code

Process

Displaying the message - JavaScript embedded into the body tag

Events

The loading of the document - on load event of the body

Input

The string written to the status bar - "Welcome!"

Event Trigger

The "onLoad" event will directly set the message on the status bar by setting the status property of the window object to "Welcome!"

The Solution

Define the body tag <body> Register the onload event <body onLoad="" Make the onload event refer to the window <body onLoad="window"> Make the window refer to it's status bar <body onLoad="window.status"> Set a new value on the status bar which informs the web browser to immediately change the current value to "Welcome!" <body onLoad="e;window.status=Welcome"> Surround the sub statement in single quotes since double quotes are used. <body onLoad="window.status='Welcome!'">

Usefulness

Status bar messages can be used when the user has the mouse over a hyperlink and you want to provide a description about where the user will go before they click it to help them make up their mind. This is sometimes better then the default which only shows a non-user friendly file location. However it can take a long time to customize all your hyperlinks and remember if it is customized the new message should have a better description then the default file location.

Run Code | View Code

See also Changing the content of a document

Using alert | Changing the background color of the document | Changing the content of a document | Using prompt | Using confirm | Changing the URL of a window Manually | Querying a text field's value | Checking the selected value of a select object | Checking if a checkbox is selected | Checking if a radio button is selected in a group | Making a rollover | Preloading images | Getting the time | Using setTimeout/setInterval | Making windows | Making cookies

JavaScript Tutorial Home