Introduction
This article gives an idea to use the javascript to find the position of the control on the web page.
you might face the situation like diplaying the Ajax UpdateProgress control while doing the partial post back. this problem I solved in the same type of area.
Using the code
Here the code snippets provided as two base classes such as positioning the UpdateProgress control at the position of the control that caused the post back on the page, and the second one is postioning the UpdateProgress based on the postion of the Mouse(this might not be the accurate but, in our case we have huge HTML content on the page and the content positioned/visibled based on various conditions).
<head>
<script type="text/javascript">
asdffunction Point(x,y) { this.x = x; this.y = y; }
mouseLocation = new Point(0,0);
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseLoc;
function getMouseLoc(e)
{
if (IE) {
mouseLocation.x = event.clientX + document.body.scrollLeft;
mouseLocation.y = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
mouseLocation.x = e.screenX ; //+ document.body.scrollLeft;
mouseLocation.y = e.screenY - 100; //+ document.body.scrollTop;
}
// catch possible negative values
if (mouseLocation.x < 0){mouseLocation.x = 0}
if (mouseLocation.y < 0){mouseLocation.y = 0}
return true;
}
/*
source : client ID of the control that causes the event
target : client ID of the targer UpdateProgress Control to display
condition : 0/1 based on the need (0: position based on the Mouse positionn;
1: position based on the source Control position
*/
function positionDiv(source, target, condition)
{
var s=document.getElementById(source);
var t=document.getElementById(target);
if(condition)
{
if(s.offsetParent)
{
mouseLocation.x =s.offsetLeft + s.offsetWidth;
mouseLocation.y =s.offsetTop;
while(s=s.offsetParent)
{
mouseLocation.x +=s.offsetLeft;
mouseLocation.y +=s.offsetTop;
}
}
else
{
mouseLocation.x=s.offsetLeft;
mouseLocation.y =s.offsetTop;
}
mouseLocation.x=mouseLocation.x - 180;
mouseLocation.y=mouseLocation.y - 150;
}
else
{
mouseLocation.y = mouseLocation.y - 60;
mouseLocation.x = mouseLocation.x - 400;
}
if(mouseLocation.y <0)
mouseLocation.y = 0;
if(mouseLocation.x <0)
mouseLocation.x = 0;
//alert(
t.style.top = (mouseLocation.y) + "px";
t.style.left = (mouseLocation.x) +"px";
t.style.position = "absolute";
}
<script>
</head>
The Javascript function positionDiv(...) will do everything for positioning the UpdateProgress Control. Not only the UpdateProgress control and also we can make use of this code for any control that you want to display relevant to the source control.
and the code snippet that you need to do in the code behind file (.cs) file looks like the below snippets,
1)for control position
string strValue = String.Format("positionDiv('{0}', '{1}', {2});", btnRefresh.ClientID.ToString(), uprHitList.ClientID.ToString(), 1);
btnRefresh.Attributes.Add("onclick", strValue);
2)Mouse position
string strValue = String.Format("positionDiv('{0}', '{1}', {2});", btnRefresh.ClientID.ToString(), uprHitList.ClientID.ToString(), 0);
btnRefresh.Attributes.Add("onclick", strValue);
in this second case there wont be any impact of the control that we passing as the source because we will consider the mouse position only.
Raamas.
