06:33
Unknown
Introduction
This article is about showing load progress using jQuery and JavaScript. Often we perform high bandwidth operations like file upload, etc. To give a bit of relief to the website user, we need to show that something is happening. The best way is to show a progress message using JavaScript with overlay fade effect in the client area of browser.
Description
To show progress bar using jQuery, I'm using one .JS files. The .JS file is the latest version of jQuery file downloaded from Demo Code.CSS part which is used for styling overlay fade effect and progress message box style. A GIF image is used to make the progress box more effective.
Progress bar using jQuery can be attached with server side ASPX controls as well as HTML controls. For example, ASPX Link Button, Hyperlink, Menu, Button, Dropdown List, List Box, etc. and HTML Anchor, Select, Input, etc.
<%@ 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#
2 comments:
Hi,this is not working while downloading a file.How can I solve for this problem.
Display progress bar in C#.NET
Post a Comment