Introduction
We have seen in many websites, some messages are scrolled in status bar. For
display messages in status bar we just have to some lines of JavaScript coding
and it will run every browsers without having browser capping. Let's take a
look, how to create it.
Discussion
To run the message in status bar, we have to write some JavaScript functions in
<head> tag of our web page and then have to call this function from body using
JavaScript onload() event, so it can run when application is being load in
browser. If you want to increase the speed of scroll message, change the speed
in body onload() event.
Coding
Within <head> tag
<!--
STATUS BAR SCROLL -->
<script
type="text/javascript">
function
scroll(seed) {
var
m1 = "This is message 1, ";
var
m2 = "This is message 2, ";
var
m3 = "This is message 3, ";
var
m4 = "This is message 4. ";
var
msg=m1+m2+m3+m4;
var
out = " ";
var
c = 1;
if
(seed > 100) {
seed--;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 100 && seed > 0) {
for
(c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
window.status=out;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 0) {
if
(-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
{
window.status=" ";
timerTwo=window.setTimeout("scroll(100)",75);
}
}
}
</script>
<!-- STATUS BAR SCROLL END-->
Now you only have to call this function from body of the page as given below:
<body
onload="scroll(90)">
Complete Page
<%@
Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head
runat="server">
<title>Status
Bar Scroll</title>
<!-- STATUS
BAR SCROLL -->
<script
type="text/javascript">
function
scroll(seed) {
var
m1 = "This is message 1, ";
var
m2 = "This is message 2, ";
var
m3 = "This is message 3, ";
var
m4 = "This is message 4. ";
var
msg=m1+m2+m3+m4;
var
out = " ";
var
c = 1;
if
(seed > 100) {
seed--;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 100 && seed > 0) {
for
(c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
window.status=out;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
if (seed <= 0) {
if
(-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
window.status=out;
cmd="scroll("+seed+")";
timerTwo=window.setTimeout(cmd,100);
}
else
{
window.status=" ";
timerTwo=window.setTimeout("scroll(100)",75);
}
}
}
</script>
<!--
STATUS BAR SCROLL END-->
</head>
<body
onload="scroll(90)">
<form
id="form1"
runat="server">
<div>
<span
style="font-size: 16pt;
color: #3300ff"><strong><span
style="text-decoration:
underline">
STATUS BAR SCROLL<br
/>
<br
/>
</span></strong><span
style="font-size: 10pt;
color: #ff3333; font-family: Verdana">
Look at the status bar below.</span></span></div>
</form>
</body>
</html>
Screenshot
![scroll.gif]()
HAVE A GOOD CODING!