Tuesday, 30 August 2011

JavaScript masking a page to prevent any click action during processing


Download below images




/* Start Html */
<div id="MaskedDiv" class="MaskedDiv"></div>   
<div id="divLoading" class="divLoading"></div>

/* End Html */


/* Start CSS */

#MaskedDiv
{
      overflow-x:hidden;
      overflow-y:hidden;
      visibility: hidden;
      position:absolute;
      left:0px;
      top:0px;
      padding:0px;
      z-index:100;
      background-image:url('../images/mask.png');
      /* ieWin only stuff */
      _background-image:none;
      _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/mask.png');
}

#divLoading
{
      position: absolute;
      height:16px;
    width:16px;
      left: 48%;
      top: 48%;
    display: none;
    z-index: 1200;    
    text-align:center;
    background-image:url('../images/loading_img.gif');   
}

/* End CSS */

/* Start Javascript */

function ApplyMaskingDiv(zIndex)
{  
    var MaskedDiv = document.getElementById('MaskedDiv');
   
    // include a temporary iframe to make the ddl invisible/un-accessible
    var iFrameHtml = "<iframe style='position: absolute; display: block; background-color: #ffffff; " +
                        "z-index: -1; width: 100%; height: 100%; top: 0; left: 0; filter: mask();' >" + "</iframe>";                        
                       
    // Masking the whole screen   
    if(IsIEBrowser()){
        MaskedDiv.innerHTML += iFrameHtml;
    }           
    MaskedDiv.style.display = '';
    MaskedDiv.style.visibility = 'visible';
    MaskedDiv.style.top = '0px';
    MaskedDiv.style.left = '0px';
    MaskedDiv.style.width = document.documentElement.clientWidth + 'px';        
    MaskedDiv.style.height = document.documentElement.scrollHeight + 'px';
   
    if(zIndex){
        MaskedDiv.style.zIndex = zIndex;
    }
}

function RemoveMaskingDiv(zIndex)
{   
    var MaskedDiv = document.getElementById('MaskedDiv');
   
    // Remove the masking from the screen   
    MaskedDiv.style.display = 'none';
    MaskedDiv.innerHTML = "";
   
    if(zIndex){
        MaskedDiv.style.zIndex = zIndex;
    }
}

function UpdateMaskZIndex(zIndex)
{
    document.getElementById("MaskedDiv").style.zIndex = zIndex;
}

function ShowLoadingDiv()
{
    // Show the loading image
    var divLoading = document.getElementById("divLoading");
    divLoading.style.display = "block";       
}

function HideLoadingDiv()
{
    // Hide the loading image
    var divLoading = document.getElementById("divLoading");
    divLoading.style.display = "none";       
}

function IsIEBrowser()
{
    var retVal = true;
   
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
    {
         //test for MSIE x.x;
         var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
         if (ieversion>=8){
          // IE8 or above
          retVal = true;
         }
         else if (ieversion>=7){
          // IE7.x
          retVal = true;
         }
         else if (ieversion>=6){
          // IE6.x
          retVal = true;
         }
         else if (ieversion>=5){
           //IE5.x
           retVal = true;
         }
    }
    else
    {
      retVal = false;
    }
   
    return retVal;
}

/* End Javascript */

No comments:

Post a Comment