CodeProject: Setting Ajax UpdateProgress postition relavent to the source control. Free source code and programming help

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('y :' + mouseLocation.y + ' x:' + mouseLocation.x);

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.

You must Sign In to use this message board.


Per page

-- There are no messages in this forum --