Solved

How to get the cordinates (X,Y) of a asp:button when nothing is specified in style attribute.

Posted on 2004-08-23
14
253 Views
Last Modified: 2008-02-01
How to get the cordinates (X,Y) of a asp:button when nothing is specified in style attribute. The thing is i have placed a button in a table cell where i can't specify the top & left attributes in style. Now i want to show a tab stip beside the button when clicked.please help
its very urgent..........
with regards
thanx in advance
shwetabh

0
Comment
Question by:shwetabh4u
14 Comments
 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
Keep in mind that this all has to be client-side, as the the server can't know the position of the mouse event which doesn't throw a post back event.
Assuming the id of your button is "MyButton", and your tab strip "MyTabStrip", you can try something like the following.  

<head>
<script for="MyButton" event="onclick">
var buttonX, buttonY;
function getButtonXY() {
var button = document.all[ 'MyButton' ];
if( button != null ) {
  buttonX = button.style.pixelTop;
  buttonY = button.style.pixelLeft;
  document.all[ 'MyTabStrip' ].style.display = 'block';
  document.all[ 'MyTabStrip' ].style.visibility = 'visible';
  document.all[ 'MyTabStrip' ].style.pixelLeft = buttonX + 100;
  document.all[ 'MyTabStrip' ].style.pixelTop = buttonY;
}
</script>
</head>

Depending on your implementation, you may want to try using posTop and posLeft instead of pixelTop and pixelLeft.
You might also want to try offsetTop and offsetLeft if these don't give you enough info (if you need to calculate the position offscreen, for example).

Links:
pixelLeft: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/pixelleft.asp
posLeft: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/posleft.asp
offsetLeft: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/offsetleft.asp
0
 

Author Comment

by:shwetabh4u
Comment Utility
thanx for quick response but i don't have use client side. is there any other way thru which i can do it thru code behind
with regards
shwetabh
0
 
LVL 5

Expert Comment

by:Kelmen
Comment Utility
If you wanna show something beside/near the button click, you may do it when postback (button clicked), setup a flag, and/or call a routine to display the stuff near the object?
0
 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
You can set it up a bit differently.

In each table cell, put the stuff you want next to the button, and set the Visible property to False.
On post back, determine what row you're in, and set the visible property of the object next to the button on that row to true.

To determine what row you're in, you have several possibilities.  I think the simplest is to set the value of the CommandArgument of the button you use to the row index.
0
 
LVL 17

Expert Comment

by:AerosSaga
Comment Utility
just use a javascript to get x and y:

<!-- ONE STEP TO INSTALL MOUSE COORDINATES:

  1.  Copy the coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->

<BODY>

<form name="Show">
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
</form>

<script language="JavaScript1.2">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}  
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}  
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}
//  End -->
</script>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.33 KB -->

Regards,

Aeros
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
Aeros,

The problem is that he wants to display a control on the server-side using the client-side mouse position.
0
 

Author Comment

by:shwetabh4u
Comment Utility
ok friends thanx alots 4 all your efforts.but i am not allowed to use client-side. Actually i have use it at so many places so even i cant go 4 the placing the same things in different table cell(in invisibale mode). looks if i have the control on our form so there must be some way thru which we can get its location......sorry for bothering u all but plz help me once again.
thanx once again
regards
shwetabh
0
 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
Try the following code:

If you know the index of the row in which you want to add the control right away, you can put this in Page_Load:

int newPositionRowIndex = 1; // figure out the row in which you need to put the control here
Control myMovingControl = Page.FindControl( "MyMovingControl" );
myMovingControl.Parent.Controls.Remove( myMovingControl )
myDataGrid.Items[ newPositionRowIndex ].Cells[ 0 ].Controls.Add( myMovingControl );

If not, then you can put this code in the ItemCommand event handler (or whatever handler you use).  In that case, you can figure out the index by using the eventargs parameter to access the cell directly:

Control myMovingControl = Page.FindControl( "MyMovingControl" );
myMovingControl.Parent.Controls.Remove( myMovingControl )
e.Item.Cells[ 0 ].Controls.Add( myMovingControl );
0
 

Author Comment

by:shwetabh4u
Comment Utility
hello shovavnik
great effort....but dear i  dont have to place my control in the cell....it ll increase my cell hieght(the control is tab strip) i have to show it as popup.
regards
shwetabh
0
 
LVL 8

Expert Comment

by:shovavnik
Comment Utility
Ok.  So here's a summary:

You want to display a popup next to whichever control was clicked.
You can't use javascript, as Aeros suggested.
You can't place the control inside your cell.
You can't specify anything in the style attribute (I guess you're flow layout).

Can you use a css file?  This may a be a good alternative to using a style attribute.  Note that if you already use css, you can *add* css classes:
<div id="testing" css="class1 class2 class3">testing</div>

Basically, you've eliminated all the reasonable methods to get the x,y position, including positioning without the actual values.

Maybe you should reconsider some of your limitations?  Are you sure you can't use javascript?  If it's a problem of cross-browser compatibility, then we can concoct a cross-browser script.

Are you sure you can't set the style attribute?  If you can, it can be set either on the client or on the server (if javascript is allowed).

Can you place the control in your cell, and give the cell an overflow style (in css) that will prevent the cell from resizing?

You've gotta help us help you.
0
 
LVL 8

Accepted Solution

by:
shovavnik earned 500 total points
Comment Utility
I believe I should be awarded the points as I've made every reasonable effort to solve the issue at hand.

The author hasn't responded to my final query which sums up the difficulty of this question and offers some more solutions.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now