Apply Masking
Apply masking
- Define masking div & loader image under HTML page/markup
- 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>
- Add Masked div tag just before closing the body tag
<div id=”MaskedDiv” class=”MaskedDiv”>
</div>
- 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;
}
- 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;
}
- 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.
- 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.