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.
<%@ 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>Display
Progress bar using Javascript</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var
isProgressBarFlag = true;
function
DisplayProgessBarEvent()
{
var l,
t;
l = screen.width/2;
t = screen.height/3;
ActiveDivPUid = 'divProgressBar';
var
DivContent=document.createElement('div');
DivContent.innerHTML =
GetProgressBar_PU('divProgressBar');
document.body.appendChild(DivContent.firstChild);
var
objDiv=document.getElementById('divProgressBar');
objDiv.className = 'dimming';
objDiv.style.visibility = "visible";
objDiv.style.left = l + 'px';
objDiv.style.top = t + 'px';
isProgressBarFlag = true;
}
function
HideProgressBarEvent()
{
var
objPU=document.getElementById('divProgressBar');
$(document).ready(function(){
$("#divProgressBar").fadeOut(500,function()
{
document.body.removeChild(objPU);
isProgressBarFlag = false;
});
});
}
function
GetProgressBar_PU(divId)
{
var
HtmlContent="<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>";
return
HtmlContent;
}
</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