Javascript Status Bar

Update: This post was created a while ago. Window.status property was originally introduced to allow setting the text in the browser status bar. This tutorial shows you how. However, since then window.status has been removed from web standards and deprecated by multiple web browsers. We leaving this tutorial as a reference, but not recomending to use this approach anymore.

Modify Status Bar

JavaScript gives you the ability to modify the status bar.

For example, it can be useful to display information about a link, when the user moves his mouse over it or you can display a small amount of information about the current web page in the status bar.

You can also trick people into clicking a link, so be careful how you use it. If you play too many tricks on your web site visitors, they might not come back.

Status Bar Example:

  <html>
    <head>
      <title>JavaScript Status Bar</title></head>
      <body onLoad="window.status='Welcome!';return true">
    </body>
  </html>

onLoad tells the browser that as soon as your page finishes loading, it will display in your current window’s status bar (window.status) the message “Welcome!”. The return true is necessary because, without it, it won’t work.

Status Bar Example:

<html>
  <head>
    <title>JavaScript Status Bar</title>
  </head>
  <body>
    <a href="http://www.htmlcenter.com"
    onMouseOver="window.status='HTMLcenter';return true"
    onMouseOut="window.status='';return true">

      HTMLcenter

    </a>
  </body>
</html>

Our second script shows how to modify the status bar using onMouseOver and onMouseOut with links.

When the user moves his mouse over the link, it will display “HTMLcenter” in the status bar. When he moves his mouse away from the link the status bar will display nothing.

You could also have another message displayed in the status bar when the user moves his mouse cursor away from the link.

You have to change the onMouseOut statement in the link to for example:


onMouseOut="window.status='You moved your cursor away from the link.'; return true"

Note: as already mentioned in the comments, it’s worth noting that browsers can block such JavaScript code from running.

This very detailed post covers potential workarounds you can apply.

Enjoyed this post?

We are writing an e-book that explains how to quickly deploy static websites on various hosting platforms.

Subscribe and get a 50% discount when it launches!



One Response

  • Jeremy

    Just an FYI. Most good browsers these days allow the end user to block these status updates because so many sites were using this to either hide the true location of a link or to stream text ads.

    Do not rely on your end user being able to see the status update, as it may very well be blocked.

Post Your Comment

Your email address will not be published.