Scribd
Upload
68 views4 pages

Introduction To Javascript - Part 4: Writing To The Statusbar

JSINTRO5

Uploaded by

P Venu Gopala Rao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
68 views4 pages

Introduction To Javascript - Part 4: Writing To The Statusbar

JSINTRO5

Uploaded by

P Venu Gopala Rao
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

Introduction to JavaScript - Part 4

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

You might also like