Prevent multiple postbacks JS/.NET

[new_guy217]

I've seen many people ask, and today had to figure out a solution myself. Essentially you have a div and nested div. The container ends up being the width and height of the page, layered on top of all other page elements effectively disabling them. The inner div can display a message of some type.

JS CODE

<script language="javascript" type="text/javascript">
//.NET Code:
        //Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "onSubmitFunction", "jsOnSubmit();");
        function jsOnSubmit(){
            //If this page has validation controls, make sure the page is valid.    
            if ( typeof( window[ 'Page_IsValid' ] ) != "undefined" ) {
                if(Page_IsValid == true){
                    doDiv();
                }
            }
            //Otherwise, disable page / display msg
            else {
                doDiv();
            }
        }           
        //Disable all controls via transparent div, display msg
        function doDiv(){
            //get the background and msg box <DIV>s
            _backgroundElement = document.getElementById('<%= _backgroundElement.ClientID %>');
            _backgroundElementMsgBox = document.getElementById('<%= _backgroundElementMsgBox.ClientID %>');

            //initiaze fail-safe heights
            var windowWidth = 100;
            var windowHeight = 100;
            var msgPos = 200;
    
            //Set window width and height
            //Works for all web 2.0 browsers
            if(typeof(window.innerWidth) == 'number'){
                //FireFox
                windowWidth = window.innerWidth;
                windowHeight = window.innerHeight;
            } else if( document.documentElement && document.documentElement.clientHeight) {
                //IE
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if( document.body && document.body.clientHeight){
                //Linux Distros
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
            
            //Set width of the transparent div
            _backgroundElement.style.width = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), windowWidth)+'px';
            _backgroundElement.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), windowHeight)+'px';
            
            //Set position of the inner msg div
            _backgroundElementMsgBox.style.top = msgPos + 'px';
            _backgroundElementMsgBox.style.left = ((windowWidth - 250) / 2) + 'px';

            //Make divs visible, posts back
            _backgroundElement.style.display = 'block';
            _backgroundElementMsgBox.style.display = 'block';
            
            //For IE: make the GIF animated
            setTimeout('document.images["<%= loader.ClientID %>"].src = "./images/loader.gif"', 200); 
        }    </script>

ASP Front-Side

<div id="_backgroundElement" runat="server" style="text-align: center; display: none; position: absolute; left: 0px; top: 0px; z-index: 9999; background-color: #cccccc; opacity:.00; filter: alpha(opacity=00); -moz-opacity: 0.0;"></div>
<div id="_backgroundElementMsgBox" runat="server" style="display: none; position: absolute; padding: 10px 5px 5px 5px; text-align: center; border: 1px solid #bb0000; background-color: #ffffff; z-index: 10000; font-weight: bold; width: 250px; height: 75px; top: 0px; left: 0px;">
    <asp:Image ID="loader" runat="server" ImageUrl="~/images/loader.gif" /><br /><br />
    Saving Survey Progress
</div>

ASP Code Behind

protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "onSubmitFunction", "jsOnSubmit();");
        }

I got the loader from: Ajaxload - Ajax loading gif generator
For opacity support: Mandarin Design: CSS Opacity and Transparency

edit: updated code so loader displays correct in IE as well as FF.
edit: broke nested div out, so we could retain full opacity for the msg box


-b
"reluctantly coding asp since 2008"