Click here to Skip to main content
6,822,613 members and growing! (20,578 online)
Email Password   helpLost your password?
Web Development » ASP.NET » Samples     Advanced License: The Code Project Open License (CPOL)

Setting Ajax UpdateProgress postition relavent to the source control

By Raamas

Article explains how to postion the Ajax UpdateProgress control. that relavent to the control that caused the partial post back on the page.
C# (C#2.0, C#3.0), Javascript, .NET (.NET2.0, .NET3.0), ASP.NET, Dev, Design
Posted:19 Mar 2008
Updated:22 May 2008
Views:6,647
Bookmarked:12 times
Unedited contribution
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
8 votes for this article.
Popularity: 1.42 Rating: 1.57 out of 5
5 votes, 62.5%
1
2 votes, 25.0%
2

3

4
1 vote, 12.5%
5

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


Member

Occupation: Web Developer
Company: Indpro
Location: India India

Other popular ASP.NET articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
  (Refresh) 
-- There are no messages in this forum --

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads.

PermaLink | Privacy | Terms of Use
Last Updated: 22 May 2008
Editor: Sean Ewington
Copyright 2008 by Raamas
Everything else Copyright © CodeProject, 1999-2010
Web22 | Advertise on the Code Project