1996 Copyright by Stefan Koch. All rights reserved.
Writing to the statusbar 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 a!a"cript scene (I tell you why later on)# $t first how is the statusbar %addressed% & 'his script shows you how one can write a simple text to the statusbar( <ht ml > <head> <scri pt language="JavaScript" > <! - - Hide function statbar(txt ! "indo"#status = txt$ % && - - > <&scri pt > <&head> <bod'> <form> <i nput t'pe="but ton" name="l oo(" value=")ri te! " onclic(="statbar(* Hi ! +his is the statusbar!* $" > <i nput t'pe="but t on" name="erase" value=",rase!" onclic(="statbar(* * $" > <&form> <&bod'> <&ht ml > )e create two buttons which call both the function statbar(txt)# 'he txt in the brackets shows that the function gets a !ariable passed o!er from the function call# (I called this *ust txt- it could as well be anything totaly different#) )hen you look at the +form, tag where the buttons are created you can see that the function statbar(txt) is called# -ut we don%t write txt there# )e *ust put the text there we want the browser to show in the statusbar# .ou can see it this way( 'he function is called and defines the !ariable txt- it gets the %!alue% you passed o!er by the function call# "o when pressing the %)rite/% button the statbar(txt) function is called and txt stores the string %0i/ 'his is the statusbar%# .ou can now use the !ariable txt as usual# 'his method of passing !ariables to a function makes the function !ery flexible# Look at the second button# It calls the same function# )ithout !ariable passing we would need 1 different functions# Now what does the function statbar(txt) do& )ell this is simple# .ou *ust write the contents of txt to the !ariable window#status# 'his is done by window#status 2 txt3# 4 - 5 )riting an empty string (%%) to the statusbar erases it# Notice that we ha!e to use these single 6uotes % because we use double 6uotes 7 for defining on8lick# 'he browser needs to know which 6uotes belong together- so you ha!e to alternate with single and double 6uotes# I think this is 6uite clear# Working ith ti!ers .ou know already the on9ouse:!er- property from part 1 of my tutorial( <a href ="stupi d#ht m" on-ouse.ver =""i ndo"#status=*Just another stupid lin(###*$ return true" > ;on%t you hate it that the statusbar does not erase the text when the mousepointer does not point on the link any longer& I ha!e 6uite a simple solution# )e *ust write a small function which uses the same techni6ue to erase the statusbar as shown abo!e# -ut how can the erase- function be called& )e don%t ha!e a method or property which we can use for detecting if the mouse pointer is mo!ing from a link# "etting a timer is the solution# <ht ml > <head> <scri pt language="JavaScript" > <! - - Hide function moveover(txt ! "indo"#status = txt$ set+i meout("erase("/0111$ % function erase( ! "indo"#status=""$ % && - - > <&scri pt > <&head> <bod'> <a href ="dontcl c(#ht m" on-ouse.ver=" moveover(* 2isappearing!* $return true$"> lin(<&a> <&bod'> <&ht ml > .ou will recogni<e many parts of this script# 'he mo!eo!er(txt) function is *ust the statbar(txt) function after some copy=paste work on it/ Nearly the same happend to the erase() function# In the of the 0'9L- page we create a link with the known on9ouse:!er- property# :ur mo!eo!er(txt) function is called with the string %;isappearing/% being passed o!er to the txt !ariable# 'he window#status gets the 4 - 1 contents of txt# 'his the same thing as in the statbar(txt) function# 'he set'imeout(###) function call is new though# 'his function sets a timeout# )ho was expecting this& 'he set'imeout(###) function defines how long the timer is going to run and what will happen when the time is o!er# In our example the erase() function is called after 5>>> milliseconds (that%s a second for all math- cracks out there)# 'his is a phantastic feature/ .our function mo!eo!er(txt) function is finished after the timer is set# 'he browser calls the function erase() automatically after 5 second# ($lready thinking of a page telling the user( If you don%t do this your harddri!e is going to be destroyed in 5> seconds/ &&&) $fter the timeout is finished the timer does not restart again# -ut you could of course call it again in the erase() function# 'his leads us directly to the all-o!er liked scrollers# "rogra!!ing a scroller $s you already know how to write to the statusbar and how the set'imeout- function works the scroller will be easy for you to understand# In the online !ersion you ha!e the possibility to watch this scroller code in work# 0a!e a look at the script( <ht ml > <head> <scri pt language="JavaScript" > <! - - Hide var scrtxt ="Here goes 'our message the visitors to 'our page "ill "3 "loo( at for hours in pure fascination###"$ var lentxt =scrt xt#l ength$ var "idth=011$ var pos=0 - "idth$ function scroll( ! pos33$ var scroller=""$ if (pos==l ent xt ! pos=0 - "idth$ % if (pos<1 ! for (var i =0$ i <=-ath#abs(pos$ i 33 ! scroller =scroller 3" "$ % scroller=scroller 3scrtxt#substri ng(1/"i dth - i 30$ % else ! scroller=scroller 3scrtxt#substri ng(pos/"idth3pos$ % "indo"#status = scroller$ set+i meout("scroll("/041$ % 4 - ? && - - > <&scri pt > <&head> <bod' on5oad="scroll($return true$"> Here goes 'our cool page! <&bod'> <&ht ml > 'his script uses the same functions (or parts of it) we already used abo!e# 'he set'imeout(###) %tells% the timer to call the scroll() function when the time is up# 'he scroller will mo!e one step further# $t the beginning there are a lot of calculations but these are not too important for understanding how the script works# 'he calculations are there for getting the position where the scroller ought to start# If it is *ust 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 !ery popular or if they are still popular they won%t be it !ery long anymore# 'here are some reasons# I list se!eral here but there are certainly more# If you see this effect for the first time it might be 6uite nice but looking at it the 5 million and second time it is not that fun anymore# )ell@ this is no good argument indeed because this affects nearly e!ery cool trick used in your pages# 'here are more se!ere problems# )hat I don%t like is that it changes the speed when you mo!e the mouse (It gets faster/)# $t least it does that for me# 'his effect gets a lot stronger when you want to make the scroller little bit faster by changing the set'imeout- !alue# 9aybe there is a way around this problem# -ut the worst is that if you let this script run some time you get an :ut of memory error# $nd this is really ugly# It seems to be a problem of the Netscape Na!igator 1#># 9aybe a higher !ersion will ha!e this bug fixed# 'here are many other routines out there on the Net# I%!e seen some scrollers writing the text to a frame# Arogramming this shouldn%t be too difficult with the techni6ues described in this tutorial# Last changed: 11.May'96 1996 by Stefan Koch 4 - 4