<%@PageLanguage="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>Display Progress bar using Javascript</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
varisProgressBarFlag = true;
functionDisplayProgessBarEvent()
{
var l, t;
l = screen.width/2;
t = screen.height/3;
ActiveDivPUid = 'divProgressBar';
varDivContent=document.createElement('div');
DivContent.innerHTML = GetProgressBar_PU('divProgressBar');
document.body.appendChild(DivContent.firstChild);
varobjDiv=document.getElementById('divProgressBar');
objDiv.className = 'dimming';
objDiv.style.visibility = "visible";
objDiv.style.left = l + 'px';
objDiv.style.top = t + 'px';
isProgressBarFlag = true;
}
functionHideProgressBarEvent()
{
varobjPU=document.getElementById('divProgressBar');
$(document).ready(function(){
$("#divProgressBar").fadeOut(500,function()
{
document.body.removeChild(objPU);
isProgressBarFlag = false;
});
});
}
functionGetProgressBar_PU(divId)
{
varHtmlContent="<div id='" + divId + "' class='dimmer' >"+
"<table border='0' align='center' cellpadding='0' cellspacing='0' class='progress_tab'>"+
"<tr><td ondblclick='void(0);' onmouseover='over=true;' onmouseout='over=false;'> </td>"+
"<td> </td><td colspan='4'> </td><td> </td></tr><tr><td colspan='4'> </td>"+
"<td><img src='fb_small.gif' alt=''/></td><td colspan='4'> </td><td>Processing</td>"+
"</tr><tr><td> </td><td> </td><td> </td></tr></table></div>";
returnHtmlContent;
}
</script>
<style type="text/css">
div.dimmer{visibility:hidden;position:absolute;left:0px;top:0px;font-family:verdana;
font-weight:bold;padding:40px;background-image:url(honey.png);_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='honey.png');}
div.dimming{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-style:
normal;background-color: #ffffff;position:absolute;z-index:10000;visibility: hidden;border-style:
solid;border-color: #999999;border-width: 1px;}
.progress_tab{font:11px verdana; margin:0; padding:0; border:2px#e1e1e1 solid; width:120px;}
</style>
</head>
<body onload="DisplayProgessBarEvent()">
<form id="form1" runat="server">
<div align="center">
<input type="button" value="Show"onclick="DisplayProgessBarEvent()" />
<input type="button" value="hide" onclick="HideProgressBarEvent()"/>
</div>
</form>
</body>
</html>
Downloads
You can download the complete source code in C#
No comments:
Post a Comment