|
By using JavaScript we can put messages in the status bar of the browser window. In order to get the script to work when the page is loaded, we need to put the script in the HEAD part of the document, and then call the script by using the onLoad method in the BODY tag.
Basic Scroller
Here is the code to make a message scroll in the status bar of the
browser window. You can copy and paste it; just make sure to modify the messages. Example: Look at the bottom of the browser window.
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var id, position = 0;
function banner ( )
{
m1 =
" First message
here!!!";
m2 =
"
";
m3 =
"
Second message here!!!";
m4 =
"
";
var i, k, msg = m1 + m2 + m3 + m4;
k = (50/msg.length) + 1;
for (i = 0; i <= k; i++)
msg += " " + msg;
window.status = msg.substring(position,
position + 90);
if (position++ == msg.length)
position = 0;
id = setTimeout("banner()",
25);
}
-->
</SCRIPT>
</HEAD>
In order for the script to work, we need to call the script when the page is loaded. To do this we use the onLoad method in the BODY tag. Here is what it will look like:
<BODY onLoad="banner()">
We can customize this script to add as many messages as we want! All you have to do is add the additional messages after the ones alredy listed:
m1 =
" First message
here!!!";
m2 =
"
";
m3 =
"
Second message here!!!";
m4 =
"
";
m5 =
" Additional message
here!!!";
m6 =
"
";
m7 =
"
Additional message here!!!";
By doing this we can add as many additional messages as we want! In order for the additional messages to be included we need to add them to the line "var i, k, msg = m1 + m2 + m3 + m4;". This is how we do that:
var i, k, msg = m1 + m2 + m3 + m4 + m5 + m6 + m7;
We can also control how fast or how slow the message will scroll. To do this we need to modify the number 25 in the line "id = setTimeout("banner()", 25);". Decreasing the number will increase the speed, and increasing the number will decrease the speed. Speeding up the scroll will produce a line similar to this one:
id = setTimeout("banner()", 10);
And to slow the scroll would look something like this:
id = setTimeout("banner()", 50);
Experiment with the numbers to get just the right speed you need!
Complex Scroller
Here is a second way to scroll text. This code is a little more
complicated because it not only scrolls the text, but it will print out the message one letter at a time when it gets to the left-hand side of the status bar. This code can be copied and pasted as well. Example
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function scrollit(seed) {
var msg = "Put your message here!";
var out = " ";
var i = 1;
if (seed > 100) {
seed--;
var cmd="scrollit(" + seed + ")";
timerTwo=window.setTimeout(cmd, 100);
}
else if (seed <= 100 && seed > 0) {
for (i=0; i < seed; i++) {
out += " ";
}
out += msg;
seed--;
var cmd="scrollit(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd, 100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out += msg.substring(-seed,
msg.lenth);
seed--;
var cmd="scrollit(" + seed +
")";
window.status=out;
timerTwo=window.setTimeout(cmd,
100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scrollit(100)",
75);
}
}
}
-->
</SCRIPT>
</HEAD>
In order for this script to work we need to call it in the BODY tag:
<BODY onLoad="timerONE=window.setTimeout('scrollit(100)',100);">
Ping Pong Text
This script allows the text to be bounced back and forth in the status bar like a ping pong. This code can be copied and pasted. Following the code is instructions on how to customize it. Example
<SCRIPT language="JavaScript">
<!--
var msg = "*Bouncing Text Placed Here!!*";
var buffer=" ";
var message1=buffer+msg+buffer;
var dir = "left";
var speed = 75;
function pingpong()
{
if (dir == "left")
{
message2=message1.substring(2,message1.length)+" ";
window.status=message2;
setTimeout("pingpong();",speed);
message1=message2;
if (message1.substring(0,1) == "*") dir="right";
}
else
{
message2=" "+message1.substring(0,message1.length-2);
window.status=message2;
setTimeout("pingpong();",speed);
message1=message2;
if (message1.substring(message1.length-1,message1.length) == "*") dir="left";
}
}
-->
</SCRIPT>
Call the pingpong function in the BODY tag so it will start when the page is loaded:
<BODY onload="pingpong()">
Place your bouncing text in the variable "msg" where it says "*Bouncing Text Placed Here!!*".
We can also set the speed of the bounce with the variable "speed". Right now it is set to 75. Decreasing the number speeds up the bounce while increasing the number slows it down. Here's an example of how to speed it up:
var speed = 25;
Flashing Text
We can also get text to flash in the status bar. Replace the variable message with your text, and change the variable speed to slow it down or speed it up. Try it out! Example
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var message="We can also flash text in the status bar!!!";
var speed=600;
var visible=0;
function Flash() {
if (visible == 0) {
window.status=message;
visible=1;
} else {
window.status="";
visible=0;
}
setTimeout('Flash()', speed);
}
-->
</SCRIPT>
In order for this script to work, we need to call it in the BODY tag:
<BODY onLoad="Flash()">
Last Updated March 22, 2001
|
