Controlling the
Browser
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.
You know already the onMouseOver- property from my tutorial: 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.
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! ???)
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:
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. 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.
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:
<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>
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.
<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.
<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>
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.
<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>
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.
