Reader Level:
ARTICLE

Status Bar Scroll in ASP.NET

Posted by Abhimanyu K Vatsa Articles | ASP.NET Programming June 07, 2010
This article will explain you, how to scroll the message in Status Bar.
  • 0
  • 0
  • 6602
 

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!
 

COMMENT USING

Trending up