Some time ago studied a progress bar, the general idea is
When the data is processed in the background, the foreground page is also counted to show Proess Bar
Use the layer to display
Usage:
1. Reference
<script language= "javascript" src= "Showprocessbar.js" ></script>
2. In the Submit button or <A> or <span> extended properties
Isshowprocessbar= "True"
File Showprocessbar.js as follows
Addprocessbar ();
var bwidth=0;
var swidth = document.all.waiting.clientWidth;
function Checkisprocessbar (obj)
{
if (obj. isshowprocessbar== "True")
{
return false;
}
Else
{
return true;
}
}
function Checkclick (e)
{
if (e = = 1)
{
if (bwidth<swidth*0.98) {
Bwidth + + (swidth-bwidth) * 0.025;
if (document.all) document.sbar.width = bwidth;
else document.rating.clip.width = bwidth;
SetTimeout (' Checkclick (1); ', 150);
}
}
Else
{
if (document.all)
{
if (document.all.waiting.style.visibility = = ' Visible ')
{document.all.waiting.style.visibility = ' hidden ';
Bwidth = 1;}
Whichit = event.srcelement;
while (Checkisprocessbar (Whichit))
{
Whichit = whichit.parentelement;
if (Whichit = null) return true;
}
Document.all.waiting.style.pixelTop = (document.body.offsetheight-document.all.waiting.clientheight)/2 + Document.body.scrollTop;
Document.all.waiting.style.pixelLeft = (document.body.offsetwidth-document.all.waiting.clientwidth)/2 + Document.body.scrollLeft;
document.all.waiting.style.visibility = ' visible ';
if (!bwidth) Checkclick (1);
Bwidth = 1;
}
Else
{
if (document.waiting.visibility = = ' Show ')
{document.waiting.visibility = ' hide ';
document.rating.visibility = ' hide ';
Bwidth = 1;}
if (e.target.href.tostring ()!= ')
{
Document.waiting.top = (window.innerheight-document.waiting.clip.height)/2 + Self.pageyoffset;
Document.waiting.left = (window.innerwidth-document.waiting.clip.width)/2 + Self.pagexoffset;
document.waiting.visibility = ' show ';
Document.rating.top = (window.innerheight-document.waiting.clip.height)/2 + self.pageyoffset+ document.waiting.clip.height-10;
Document.rating.left = (window.innerwidth-document.waiting.clip.width)/2 + Self.pagexoffset;
document.rating.visibility = ' show ';
if (!bwidth) Checkclick (1);
Bwidth = 1;
}
}
return true;
}
}
function Addprocessbar ()
{
var str= ""
str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >";
str+= "<layer name=waiting visibility=visible zindex=2 >"
str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight= #FFFFFF bordercolordark= #C0C0C0 bgcolor=# E0e0e0> "
str+= "<tr>"
str+= "<td bgcolor= #E0E0E0 height=30px width=300px align=center>"
str+= "<font color=black> system is being handled in ...</font>"
str+= "</td>"
str+= "</tr>"
str+= "<tr>"
str+= "<td bgcolor= #E0E0E0 >"
str+= "str+= "</td>"
str+= "</tr>"
str+= "</table>"
str+= "</layer>"
str+= "</div>"
document.write (STR)
if (document.all) Document.onclick = Checkclick;
}
Test file testshowbar.html
<HTML>
<HEAD>
<script language= "javascript" src= "Showprocessbar.js" ></script>
</HEAD>
<BODY>
<a href= "error.asp" isshowprocessbar= "True" >a
<BR>
<BR>
<span onclick= "location.href= ' error.asp '" style= "Cursor:hand" isshowprocessbar= "True" ><font color=blue >Span</font></span>
<BR>
<form action= "error.asp" >
<input type=submit value= "Submit" >
<input Type=button value= "normal button" isshowprocessbar= "True" >
</form>
<p isshowprocessbar= "True" >AAAAAAAAAAAAA</P>
</BODY>
</HTML>
