Introduction to JavaScript

Introduction to JavaScript
Part 4

Now I want to show you how to write text to the statusbar (the bar on the bottom of your browser where the URLs are shown) and of course I will explain how a scroller works- although they are already hated in the JavaScript scene (I tell you why later on).
At first how is the statusbar 'addressed' ? This script shows you how one can write a simple text to the statusbar:

Isn't this nice? Here's the script:

<html>
<head>
<script language="JavaScript">
<!-- Hide
function statbar(txt) {
   window.status = txt;
}
// -->
</script>
</head>
<body>
<form>
<input type="button" name="look" value="Write!" onclick="statbar('Hi! This is the statusbar!');">
<input type="button" name="erase" value="Erase!" onclick="statbar('');">
</form>
</body>
</html>

We create two buttons which call both the function statbar(txt). The txt in the brackets shows that the function gets a variable passed over from the function call. (I called this just txt- it could as well be anything totaly different.) When you look at the <form> tag where the buttons are created you can see that the function statbar(txt) is called. But we don't write txt there. We just put the text there we want the browser to show in the statusbar. You can see it this way: The function is called and defines the variable txt- it gets the 'value' you passed over by the function call. So when pressing the 'Write!' button the statbar(txt) function is called and txt stores the string 'Hi! This is the statusbar'. You can now use the variable txt as usual. This method of passing variables to a function makes the function very flexible. Look at the second button. It calls the same function. Without variable passing we would need 2 different functions.
Now what does the function statbar(txt) do? Well this is simple. You just write the contents of txt to the variable window.status. This is done by window.status = txt;. Writing an empty string ('') to the statusbar erases it. Notice that we have to use these single quotes ' because we use double quotes " for defining onClick. The browser needs to know which quotes belong together- so you have to alternate with single and double quotes. I think this is quite clear.

You know already the onMouseOver- property from part 2 of my tutorial:
<a href="stupid.htm" onMouseOver="window.status='Just another stupid link...'; return true">
Don't you hate it that the statusbar does not erase the text when the mousepointer does not point on the link any longer? I have quite a simple solution. We just write a small function which uses the same technique to erase the statusbar as shown above. But how can the erase- function be called? We don't have a method or property which we can use for detecting if the mouse pointer is moving from a link. Setting a timer is the solution.

Try the following script here. Just move your pointer over it- don't click it!

This is really neat, isn't it? Just have a look at the source and you'll see that it is easier than it seems on the first glance.

<html>
<head>
<script language="JavaScript">
<!-- Hide
function moveover(txt) {
   window.status = txt;
   setTimeout("erase()",1000);
}
function erase() {
   window.status="";
}
// -->
</script>
</head>
<body>
<a href="dontclck.htm" onMouseOver="moveover('Disappearing!');return true;">
link</a>
</body>
</html>

You will recognize many parts of this script. The moveover(txt) function is just the statbar(txt) function after some copy/paste work on it! Nearly the same happend to the erase() function. In the of the HTML- page we create a link with the known onMouseOver- property. Our moveover(txt) function is called with the string 'Disappearing!' being passed over to the txt variable. The window.status gets the contents of txt. This the same thing as in the statbar(txt) function. The setTimeout(...) function call is new though. This function sets a timeout. Who was expecting this? The setTimeout(...) function defines how long the timer is going to run and what will happen when the time is over. In our example the erase() function is called after 1000 milliseconds (that's a second for all math- cracks out there). This is a phantastic feature! Your function moveover(txt) function is finished after the timer is set. The browser calls the function erase() automatically after 1 second. (Already thinking of a page telling the user: If you don't do this your harddrive is going to be destroyed in 10 seconds! ???)
After the timeout is finished the timer does not restart again. But you could of course call it again in the erase() function. This leads us directly to the all-over liked scrollers.

As you already know how to write to the statusbar and how the setTimeout- function works the scroller will be easy for you to understand.

Push this button to see my scroller. The script has to be loaded from the server so please be patient if you won't see the scroller immediately.

Have a look at the script:

<html>
<head>
<script language="JavaScript">
<!-- Hide

var scrtxt="Here goes your message the visitors to your page will "+
"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;

function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos<0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();return true;">
Here goes your cool page!
</body>
</html>

This script uses the same functions (or parts of it) we already used above. The setTimeout(...) 'tells' the timer to call the scroll() function when the time is up. The scroller will move one step further. At the beginning there are a lot of calculations but these are not too important for understanding how the script works. The calculations are there for getting the position where the scroller ought to start. If it is just at the start the script has to add some spaces in order to place the text right.

I told you at the beginning of this part of my introduction that scrollers are not very popular or if they are still popular they won't be it very long anymore. There are some reasons. I list several here but there are certainly more.
If you see this effect for the first time it might be quite nice but looking at it the 1 million and second time it is not that fun anymore. Well, this is no good argument indeed because this affects nearly every cool trick used in your pages.
There are more severe problems. What I don't like is that it changes the speed when you move the mouse (It gets faster!). At least it does that for me. This effect gets a lot stronger when you want to make the scroller little bit faster by changing the setTimeout- value. Maybe there is a way around this problem. But the worst is that if you let this script run some time you get an Out of memory error. And this is really ugly. It seems to be a problem of the Netscape Navigator 2.0. Maybe a higher version will have this bug fixed.

There are many other routines out there on the Net. I've seen some scrollers writing the text to a frame. Programming this shouldn't be too difficult.

Index - Part 1 - Part 2 - Part 3 - Part 5 - Part 6 - Part 7