View Full Version : Find XY position of control when clicked.

06-14-2005, 08:43 PM

I'm working with the HTML based popup calendar found in the download area of this web site.

Click Here. (http://www.dynamicdrive.com/dynamicindex6/popcalendar.htm)

In the .js file there is a routine which sets the XY coordinate of the html calendar. It looks like the following.

function dlcalendar_position( e )
var oEvent = ( e || window.event );
var eDocBody = document.body;
var nWindowLeftEdge = eDocBody.scrollLeft;
var nWindowTopEdge = eDocBody.scrollTop;
var nLeftPos = ( oEvent.pageX || oEvent.x + nWindowLeftEdge );
var nTopPos = ( oEvent.pageY || oEvent.y + nWindowTopEdge );
dlcalendar_keepInWindow( this.mGetCalendarElement(), nLeftPos, nTopPos )

Just for whomever helps, I'm using Visual Studio ( InterDev ) as my development environment.

So thus far this is what I've noticed.

1. I place a break point on the RedBold line.
2. The items in GreenBold state "UNDEFINED" when I set a watch for them.
3. oEvent appears to be the same as window.event
4. eDocBod = document.body

The following were the property values oEvent
x 138 Long
y 337 Long
clientX 138 Long
clientY 337 Long
offsetX 84 Long
offsetY 15 Long
screenX 269 Long
screenY 568 Long

These were values when expanding the srcElement of oEvent ( oEvent.srcElement ??? )
id "input_flightdeparture15" String
offsetLeft 50 Long
offsetTop 782 Long
offsetWidth 95 Long
offsetHeight 22 Long
clientHeight 18 Long
clientWidth 91 Long
clientTop 2 Long
clientLeft 2 Long

But this is where I start having issues. I'm not able to locate "id"'d text box in the eDocBody object to try and compare numbers.

Actually I'm trying to determine which numbers either in the oEvent and or eDocBody are the relative/actual XY coordinates of the control that initiated the event.

If someone can point me in the right direction that would be a plus. I've found a site Click Here (http://www.quirksmode.org/js/findpos.html) that does explain how to do what I'm asking, but it's currently over my head.

In short it offers this function which I somewhat understand.

function setLyr(obj,lyr)
var newX = findPosX(obj);
var newY = findPosY(obj);
if (lyr == 'testP') newY -= 50;
var x = new getObj(lyr);
x.style.top = newY + 'px';
x.style.left = newX + 'px';

If somebody does give me some help. I don't mind the positioning being hard coded but I woule really like it to be specified in the DHTML tag the user places on their form ( that's just icing on the cake ).

I've also posted another question using this calendar form as well. Though at this time I'm really wanting this done first.

My other post (http://www.dynamicdrive.com/forums/showthread.php?t=3276)

Again thanks for the help.