function CPos(x, y)
{
this.x = x;
this.y = y;
}
function getObjPos(ATarget)
{
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
function UnitsValue2Num(uv)
{
var UnitsLen=2;
var sN=uv.substr(0,uv.length-UnitsLen);
return parseInt(sN);
}
function CCoverter( oTarget )
{
this.coverTarget=oTarget;
this.Masker=null;
this.MaskerStyle="";
this.msgBox=null;
this.msgBoxStyle="";
this.msgBoxWidth="200px";
this.msgBoxHeight="80px";
this.msgHtml=null;
this.msgHtmlValue="<span>Hello World</span>";
this.msgHtmlStyle=""
this.Create=CCoverter_Create;
this.Show=CCoverter_Show;
this.Dispose=CCoverter_Dispose;
this.HideSelectCtrl=CCoverter_HideSelectCtrl;
this.ShowHiddenSelectCtrl=CCoverter_ShowHiddenSelectCtrl;
}
function CCoverter_Create()
{
this.Dispose();
var masker=document.createElement("div");
this.Masker=masker;
if (this.MaskerStyle!="") this.Masker.className=this.MaskerStyle;
this.coverTarget.scrollWidth > this.coverTarget.style.width ? this.Masker.style.width=this.coverTarget.scrollWidth : this.Masker.style.width=this.coverTarget.style.width ;
this.coverTarget.scrollHeight > this.coverTarget.style.height ? this.Masker.style.height=this.coverTarget.scrollHeight : this.Masker.style.height=this.coverTarget.style.height ;
this.Masker.style.zIndex=100;
var tgPos=getObjPos(this.coverTarget);
this.Masker.style.position="absolute";
var msgBox=document.createElement("div");
this.msgBox=msgBox;
if (this.msgBoxStyle!="") this.msgBox.className=this.msgBoxStyle;
this.msgBox.style.zIndex=101;
this.msgBox.style.position="absolute";
this.msgBox.style.width=this.msgBoxWidth;
this.msgBox.style.height=this.msgBoxHeight;
this.msgBox.style.left=UnitsValue2Num(this.Masker.style.width) / 2 - UnitsValue2Num( this.msgBox.style.width) / 2 ;
this.msgBox.style.top=UnitsValue2Num(this.Masker.style.height) / 2 - UnitsValue2Num(this.msgBox.style.height) / 2 ;
if (this.msgBoxStyle!="") this.msgBox.className=this.msgBoxStyle;
var msgHtml=document.createElement("div");
this.msgHtml=msgHtml;
if (this.msgHtmlStyle!="") this.msgHtml.className=this.msgHtmlStyle;
this.msgHtml.innerHTML=this.msgHtmlValue;
this.msgHtml.style.textAlign="center";
this.msgBox.appendChild(this.msgHtml);
}
function CCoverter_Show( bIsShow )
{
if (!document.body.contains(this.Masker)) this.coverTarget.insertAdjacentElement("beforeBegin",this.Masker);
if (!document.body.contains(this.msgBox)) this.Masker.insertAdjacentElement("beforeBegin",this.msgBox);
if ( bIsShow==true)
{
this.Masker.style.display="block";
this.msgBox.style.display="block";
this.HideSelectCtrl();
}
else
{
this.Masker.style.display="none";
this.msgBox.style.display="none";
this.ShowHiddenSelectCtrl();
}
}
function CCoverter_Dispose()
{
if (this.Masker!=null) { this.coverTarget.parentElement.removeChild(this.Masker);this.Masker=null; }
if (this.msgBox!=null) { this.coverTarget.parentElement.removeChild(this.msgBox); this.msgBox=null; }
}
function CCoverter_HideSelectCtrl()
{
var selects=this.coverTarget.getElementsByTagName("select");
for(var i=0;i<selects.length;i++)
{
selects[i].style.visibility="hidden";
}
}
function CCoverter_ShowHiddenSelectCtrl()
{
var selects=this.coverTarget.getElementsByTagName("select");
for(var i=0;i<selects.length;i++)
{
selects[i].style.visibility="visible";
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type ="text/css" >
.cv_body
{
background-color:#d2e3ee;
border:2px solid #7ebcff;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.cv_box
{
background-color:#7ebcff;
border:4px solid #ffffff;
}
.cv_html
{
color:#ffffff;
margin-top:10px;
}
</style>
<script type="text/javascript" src="../js/JSUtil.js"></script>
<script language="javascript" type="text/javascript">
<!--
var cv;
window.onload =function()
{
cv=new CCoverter(document.getElementById ("div1"))
cv.msgHtmlValue="<div>processing...<img src='../img/processing.gif' style='margin-top:5px' /></div>";
cv.MaskerStyle="cv_body";
cv.msgBoxStyle="cv_box";
cv.msgHtmlStyle="cv_html";
cv.msgBoxWidth="150px";
cv.msgBoxHeight="60px";
cv.Create();
}
function Button1_onclick() {
cv.Show(true);
}
function Button2_onclick() {
cv.Show(false);
}
function Button3_onclick() {
var d1=document.getElementById ("div1");
var e=document.getElementById("div2");
var s1=document.getElementById ("Select1");
//alert(e.scrollWidth+","+e.scrollHeight+"\n"+s1.scrollWidth+","+s1.scrollHeight+"\n");
alert(d1.scrollTop+","+d1.scrollLeft+"\n");
}
function Button5_onclick() {
document.getElementById ("div3").style.display ="block";
}
// -->
</script>
</head>
<body>
<table style="width: 751px; height: 505px" cellpadding="5" cellspacing="5" border="1" bordercolor="#339966">
<tr>
<td style="width: 38px; height: 50px">
fdd</td>
<td style="width: 450px; height: 50px;" bgcolor="#ccccff">
fd</td>
<td style="height: 50px">
dfd</td>
</tr>
<tr>
<td style="width: 38px; height: 423px;">
fdf</td>
<td style="width: 450px; height: 423px;" valign="top" align="center">
<div id="div3" style="width: 100px; height: 100px; display :none ;" >
</div>
<div style ="position :relative ; ">
<div id="div1" style=" width :373px; height :233px;background-color: #ffff66; left: 0px; top: 0px;" >
fdfdsf<br />
fd<br />
fd<br />
fd<br />
f<br />
<select id="Select1" style="width: 78px; height: 25px">
<option selected="selected"></option>
</select>
<input id="Button4" type="button" value="button" />
<select id="Select2">
<option selected="selected"></option>
</select>
<input id="Checkbox1" type="checkbox" />
<input id="Radio1" type="radio" />
<input id="Text1" style="width: 83px" type="text" /></div>
</div>
</td>
<td style="height: 423px">
fdf</td>
</tr>
<tr>
<td style="height: 168px; width: 38px;">
</td>
<td style="width: 450px; height: 168px">
fdsffdfdsfdsafdsafdsafdsafdsafsdafdsafsafsafdf<br />
dfdfdf<br />
<div style =" position :relative ;">
<div style=" left: 0px; width: 238px; position:absolute ; top: 0px; height: 185px;
background-color: #00cc66">
</div>
dfdsfsadfdsafddfdsffdfdfdsfds<br />
dfsfdsafsafsafsadfsdaf<br />
dsfsdfdfasfdsafdsafsdafee<br />
dfsdfeeeeeeeeeeeeeeeeeeee<br />
fsdafdddddddddddddedddddddd<br />
fdfdsfdsfffffffffffffffffffffffff<br />
dsfa<br />
safd<br />
f<br />
dfd<br />
dfsafdsa</div>
</td>
<td style="height: 168px">
df</td>
</tr>
</table>
<input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" />
<input id="Button2" type="button" value="button" language="javascript" onclick="return Button2_onclick()" />
<input id="Button3" type="button" value="button" language="javascript" onclick="return Button3_onclick()" />
<input id="Button5" type="button" value="button" language="javascript" onclick="return Button5_onclick()" />
<br />
</body>
</html>
