Simple JavaScript Scripts, Part 5
Scrolling Banner
The next example will show you how to create a scrolling banner that will
display your text on the browser's status bar. This is a useful script as
it can display a scrolling message you might want your visitors to see. A
banner can grab your visitor's attention and thus is a great way to pass on
your information.
The difference between this scrolling banner and others you have
seen is that you can control the banner's speed and pause the
scrolling. Let's see the script:
Scrolling banner
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var b_speed=8; //defines banner speed
var banner_id=10;
var b_pause=0; //to pause the banner
var b_pos=0;
function stop() {
if(!b_pause) {
clearTimeout(banner_id);
b_pause=1;
}
else {
banner_main();
b_pause=0;
}
}
function banner_main() {
msg="W e l c o m e to J a v a S c r i pt!"
+" JavaScript can do some really"
+" Cool stuff. Check out http://rhoque.com"
+" for more examples..."
var k=(40/msg.length)+1;
for(var j=0;j<=k;j++) msg+=" "+msg;
window.status=msg.substring(b_pos,b_pos+120);
if(b_pos++==msg.length){
b_pos=0;
}
banner_id=setTimeout("banner_main()",1000/b_speed);
}
</script>
</head>
<TITLE>Banner</TITLE>
</HEAD><BODY BGCOLOR="ffffff">
<H2> Example 5.8:</h2>
<P ALIGN=Center>
<FORM name="form1" action="">
<P ALIGN=Center>
<input type="button" value="Start"
onclick='{
clearTimeout(banner_id);
b_pos=0;
banner_main()
}'>
<input type="button" value="Slower" onclick='
{
if (b_speed<3){
alert("Does not get any slower!");
}
else b_speed=b_speed-1;
}'>
<input type="button" value="Faster" onclick='
{
if (b_speed>18){
alert("Does not get any faster!");
}
else b_speed=b_speed+2;
}'>
<input type="button" value="Pause" onclick='stop()'>
<input type="button" value="Reset" onclick='b_speed=8;'>
</FORM>
</BODY>
</HTML>
Test This Example
The script is simple. There are three to four imported parts to the
script. There are two functions: stop() and
banner_main(). The stop() function is used
to pause the scrolling text. First we check if the banner is paused, if
it is not, we use the clearTimeout() method to pause the
banner and make the b_pause variable true. When the user
clicks on the Pause button, the function calls the
banner_main() function. Lastly, we make the
b_pause variable false.
In our banner_main() function, we first assign a value to
the variable msg. Then, we take the length of
msg, divide that by 40, and add one to the result. This
value is assigned to k. Now a loop is used from
j to k to add the blanks to the value of
msg. Next, we display the banner in a window's status bar
by taking the substring of msg from 0 to 120. Later we see
if the b_pos becomes as long as the msg
length and set the b_pos equal to zero again.
To make the banner go faster we just increase the value of
b_speed, and to make the banner go slower we decrease the
value of b_speed.
Reaz Hoque (pronounced Re-oz Hawk) is an author, software developer and a
web designer for
Knowledgebase, Inc.
Recently
he worked on the development team for one of the
world's first on-line commercial applications for General Electric's startup
company Public Sourcing Services. In addition to web development, Reaz is
accomplished in Pascal, Visual Basic, Assembler, C++, and SQL. He contributes
articles to various online/print magazines and is currently a regular
JavaScript
columnist on
NetscapeWorld.
© Reaz Hoque, 1996
All Right Reserved
Comments can be sent to Reaz Hoque
Simple JavaScript Scripts, Part 4
Simple JavaScript Scripts
|
