Status Bar Scroll in ASP.NET
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
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
Comments
Post a Comment