The status bar is the gray strip along the bottom of your browser. Normally it says
stuff like "Document: Done" (Netscape) or "Done" (IE), or shows the
address of a link when you point at it. But JavaScript can write anything you want down
there with one line: window.status = "hi". Here are the three ways I
use it.
1. A MESSAGE WHEN YOU POINT AT A LINK
Try it: hold your mouse over the links in the menu at the top of this page,
then look at the bottom of your window. Here's the code for one link:
<a href="clocks.html"
onMouseOver="window.status='See my clocks!'; return true"
onMouseOut="window.status=''; return true">Clocks</a>
|
- Watch the quote marks. The whole thing inside onMouseOver is in double quotes,
so the message itself has to be in single quotes. Mix them up and it breaks.
- return true is the important part. Leave it off and the browser writes the
link's address right on top of your message, so fast you never see it.
- onMouseOut with two single quotes and nothing between them clears the message
when you move off the link.
- If your message has an apostrophe in it, like Lorenzo's, put a backslash in
front of it: 'Lorenzo\'s scripts'. That one took me a whole evening to figure out.
2. THE SCROLLER
The one running on my front page. Your message slides across
the status bar forever. This part goes in your <head>:
<script language="JavaScript">
<!--
// Status bar scroller - Lorenzo's JavaScript Zone
var scrollMsg = "Welcome to my page! Thanks for stopping by! ";
var scrollPos = 0;
function scrollStatus() {
window.status = scrollMsg.substring(scrollPos, scrollMsg.length)
+ scrollMsg.substring(0, scrollPos);
scrollPos = scrollPos + 1;
if (scrollPos >= scrollMsg.length) {
scrollPos = 0;
}
setTimeout("scrollStatus()", 120);
}
//-->
</script>
|
And this starts it, by adding onLoad to your <body> tag
(keep your colors and stuff in there too):
|
<body onLoad="scrollStatus()">
|
How it works: every 120 milliseconds, it chops the message in two at
scrollPos, sticks the front piece on the back, and writes that to the status bar.
Then it moves the cut one letter over and does it again. setTimeout is what makes
it run again. It's like a loop that waits between laps.
- Speed: the 120 is how many milliseconds between steps (1000 = one second).
Bigger is slower. Under about 50 it's a blur and nobody can read it.
- Put a bunch of spaces at the end of your message so there's a gap before it
comes around again. Otherwise the end runs right into the beginning.
- Keep it short. At 640x480 the status bar is only so wide.
3. THE TYPEWRITER
Types your message out one letter at a time with a cursor, waits three seconds, and
starts over. Same deal: head part, then onLoad="typeStatus()" in the
body tag.
<script language="JavaScript">
<!--
// Status bar typewriter - Lorenzo's JavaScript Zone
var typeMsg = "Welcome to my page! Thanks for stopping by!";
var typeCount = 0;
function typeStatus() {
typeCount = typeCount + 1;
window.status = typeMsg.substring(0, typeCount) + "_";
if (typeCount < typeMsg.length) {
setTimeout("typeStatus()", 100);
} else {
typeCount = 0;
setTimeout("typeStatus()", 3000);
}
}
//-->
</script>
|
STATUS BAR MANNERS
- Pick one. Don't run the scroller or the typewriter on a page with link messages.
The scroller rewrites the status bar about eight times a second and your link messages get
wiped out before anybody can read them. That's why my front page has the scroller and this
page has the link messages, and neither page has both.
- Don't put messages on every link. People look at the status bar to see where a
link goes before they click it. If you cover that up on every link, they can't tell. I only
put messages on links that need explaining.
- Only one scroller per page. Two of them fight over the same status bar and you get
garbage.
NEXT: CLOCKS & DATES >>
GeoCities.us
» SiliconValley » Monitor
