|
|
|||||
|
Ready to Use Script Archive | | | Over 5000 Free Fonts | | | Tutorials | | | Javascript Forum | | | Other Javascript Resources | | | Cheat Sheet |
Further Programming - Part II
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.
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.
<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. 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.
|
|