Click here to Skip to main content
15,922,419 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
How to display process bar when clicking on button till the targeted page is to be shown through the javascript?
Posted

 
Share this answer
 
Comments
Manas Bhardwaj 3-Jun-12 12:33pm    
+5
Prasad_Kulkarni 4-Jun-12 1:15am    
Thank you Manas!
 
Share this answer
 
in form add this

XML
<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <script language="javascript" type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_pageLoaded(pageLoaded);
        prm.add_initializeRequest(initializeRequest);
        prm.add_endRequest(endRequest);
        function initializeRequest(sender, eventArgs)
        {
            ShowValidationInfo();
        }
        function pageLoaded(sender, eventArgs)
        {

        }
        function endRequest(sender, endRequestEventArgs)
        {
            HideValidationInfo();
        }


    </script>


in js add this function

C#
function CreateDivSections()
{
    var myWidth = document.body.clientWidth;
    var myHeight = document.body.clientHeight;

    var dvDisable = document.createElement('div');
    dvDisable.id = 'dvDisable';
    dvDisable.className = 'clsDisablePage';
    document.body.appendChild(dvDisable);
    dvDisable.style.width = myWidth+15;
    dvDisable.style.height = myHeight+20;

    var dvLayer = document.createElement('div');
    dvLayer.id = 'dvLayer';
    dvLayer.className = 'clsWaitPage';
    document.body.appendChild(dvLayer);
    dvLayer.style.left = (myWidth - dvLayer.style.width) / 2 ;
    dvLayer.style.top = (myHeight - dvLayer.style.height) / 2 ;
}


        function ShowValidationInfo()
        {
            CreateDivSections();
            document.getElementById('dvDisable').style.visibility = 'visible';
            document.getElementById('dvLayer').style.visibility = 'visible';
        }
        function HideValidationInfo()
        {
            CreateDivSections();
            document.getElementById('dvDisable').style.visibility =  'hidden';
            document.getElementById('dvLayer').style.visibility =  'hidden';
        }



in css add this

CSS
.clsWaitPage
{
    visibility:hidden;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    font-family: Book Antiqua;
    font-weight:bold;
    font-size: 12pt;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 1002;
    background: white;
    background-image:url(wait.gif);
    overflow: hidden;
    position: absolute;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    height: 100px;
    width: 100px;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900