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

Report Article

Discuss

Send to a friend

8 votes for this Article.

Popularity: 1.42 Rating: 1.57 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Raamas

Occupation:	Web Developer
Company:	Indpro
Location:	India

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
MasterPages reinvented - a Component Based Template Engine for ASP.NET
User-friendly but powerful template engine which provides clean and painless separation of content and MasterPages (templates).

Article Top

You must Sign In to use this message board.

(Refresh)

Subject

Author

Date

-- There are no messages in this forum --

General News Question Answer Joke Rant Admin