Apply Masking

Apply masking
  1. Define masking div & loader image under HTML page/markup
    1. Add Loader Image into Images folder and image tag just after body tag
<div id=”divLoader” style=”z-index:2000; position:absolute;left:50%;top:40%;display:none;”><img alt=”” src=”Images/loader.gif” /></div>
    1. Add Masked div tag just before closing the body tag
<div id=”MaskedDiv” class=”MaskedDiv”>
   </div>
  1. Create Style sheet  for Masked Div and add the reference of style sheet (CSS) file into HTML page
div.MaskedDiv
{
    z-index:600;
    position:absolute;
    visibility: hidden;
    left:0px;
    top:0px;
    padding:0px;       
    background-Color:#666362;
                filter:alpha(opacity=60);-moz-opacity: 0.6;
               opacity: 0.6;
}
  1. Create Javascript file “Masking.js” and add the reference of JS file into HTML page
function parentDocumentWidth() {
return parent.window.innerWidth != null? parent.window.innerWidth: parent.document.documentElement && parent.document.documentElement.clientWidth ? parent.document.documentElement.clientWidth:document.body != null? parent.document.body.clientWidth:null;
}
function parentDocumentHeight() {
return parent.window.innerHeight != null? parent.window.innerHeight: parent.document.documentElement && parent.document.documentElement.clientHeight ? parent.document.documentElement.clientHeight:document.body != null? parent.document.body.clientHeight:null;
}
function pageWidth() {
return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;
}
function pageHeight() {
return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;
}
function posLeft() {
return typeof window.pageXOffset != ‘undefined’ ? window.pageXOffset:document.documentElement && document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;
}
function posTop() {
return typeof window.pageYOffset != ‘undefined’ ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;
}
function $(objName)
{  
    return document.getElementById(objName);
}
function ApplyMaskingDiv(isInvokedFrmChildPage)
{  
    var MaskDivObj;
    var PageWidth;
    var PageHeight;
   
    // get mask object
    MaskDivObj=this.GetObj(isInvokedFrmChildPage,MaskedDivID);
   
    // get page width and height
    if(isInvokedFrmChildPage)
    {
        PageWidth=parentDocumentWidth();
        PageHeight=parentDocumentHeight();
    }
    else
    {
        PageWidth= pageWidth() ;
        PageHeight= pageHeight();
    }
    // 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: 0px; left: 0px; filter: mask();’ >” + “</iframe>”;                                       
                         
    // Masking the whole screen   
    if(IsIEBrowser())
    {
        MaskDivObj.innerHTML += iFrameHtml;
    }           
   
    MaskDivObj.style.display=”;
    MaskDivObj.style.visibility=‘visible’;
    MaskDivObj.style.top=‘0px’;
    MaskDivObj.style.left=‘0px’;
       
    MaskDivObj.style.width =  PageWidth + ‘px’;   
    MaskDivObj.style.height = PageHeight + ‘px’;   
}
function RemoveMaskingDiv(isInvokedFrmChildPage)
{
    var MaskDivObj;
   
    // get mask object
    MaskDivObj=this.GetObj(isInvokedFrmChildPage,MaskedDivID);
   
    // Remove the masking from the screen
    MaskDivObj.style.display=‘none’;
    MaskDivObj.innerHTML = “”;
}
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;
}
function ShowWaitCursor(isInvokedFrmChildPage)
{
    var LoaderDivObj;
    try
    {
        LoaderDivObj=this.GetObj(isInvokedFrmChildPage,LoaderDivID);
        LoaderDivObj.style.display = “”;
    }
    catch(err){}
}
function HideWaitCursor(isInvokedFrmChildPage)
{     
    var LoaderDivObj;
    try
    {
        LoaderDivObj=this.GetObj(isInvokedFrmChildPage,LoaderDivID);
        LoaderDivObj.style.display = “none”;
    }
    catch(err){}
}
function GetObj(isInvokedFrmChildPage,objId)
{
    var Obj;
    if(isInvokedFrmChildPage)
    {
        Obj=parent.document.getElementById(objId);
    }
    else
    {
        Obj=$(objId);
    }
   
    return Obj;
}
  1. Call ApplyMaskingDiv(false); ShowWaitCursor(false); to apply masking and wait cursor image. Pass false as an argument, only if you are calling these methods from main page and true if callee page is defined in the IFrame.
  1. Call RemoveMaskingDiv(false); HideWaitCursor(false); to remove masking and hide wait cursor image. Pass false as an argument, only if you are calling these methods from main page and true if callee page is defined in the IFrame.
Continue ReadingApply Masking
Older Posts