Monday 1 April 2013

ASP.NET - DISPLAY PROGRESS BAR BUTTON CLICK ASP NET

ASP.NET - DISPLAY PROGRESS BAR BUTTON CLICK ASP NET







<%@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;'>&nbsp</td>"+
        "<td>&nbsp</td><td colspan='4'>&nbsp</td><td>&nbsp</td></tr><tr><td colspan='4'>&nbsp</td>"+
        "<td><img src='fb_small.gif' alt=''/></td><td colspan='4'>&nbsp</td><td>Processing</td>"+
        "</tr><tr><td>&nbsp</td><td>&nbsp</td><td>&nbsp</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-familyVerdana, Arial, Helvetica, sans-serif;font-size11px;font-style:
    normal;background-color#ffffff;position:absolute;z-index:10000;visibilityhidden;border-style:   
    solid;border-color#999999;border-width1px;}
    .progress_tab{font:11px verdanamargin:0padding:0border:2px#e1e1e1 solidwidth: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