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
HAVE A GOOD CODING!