File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Is there something  better then event.pageX/Y? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Is there something  better then event.pageX/Y?" Watch "Is there something  better then event.pageX/Y?" New topic
Author

Is there something better then event.pageX/Y?

Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Hi

I am wondering if there is something better then event.pageX(Y). Like Something that gets better coordinates.

First I read that .pageX(Y) is not supported in IE6 through 8.

So I am not sure what I should do. I tried all the rest of the ones I could possible find(see link below).

Mouse Events

I been making a popup validation callout. I got it to implement it properly when the user clicks the submit button. However I am trying to use the same function to make a validation callout over my textbox.

When I leave that textbox with a invalid number(say 0) it popups up the callout but far away. I don't understand why though.

So is there something that gets the position of the control and not the mouse?

Here is my code so you can see any example. You just need to put your own jquery file in it.



Also I don't understand why but if you run my code in IE(I am using 7) and you try to enter something invalid in the textbox and leave an error will be displayed.

edit

I forgot to mention the reason why there are so many breaks is that I wanted to show you about's where the position of that box is on my real website(written in asp.net).

edit 2

I found something that seems to work but I don't understand fully what is going on. Can someone help me understand.

I already did a couple of my own tweaks to make it work.



First I don't know how to change this: document.getElementById(id)
to a jquery selector. I tried to do this

var test = "#" + id;
var obj = $(test);

but this causes the program not to work anymore.

I really don't understand anything in the while loop.

Using the new found way.


[ June 19, 2008: Message edited by: Michael Hubele ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
[EDIT: whoops! I missed the bottom part of your code where you did the same basic thing!]

I do not think JQuery has a position method built in...Not near Bear's book to check. But it is rather simple to do:



Example calling it:



Eric
[ June 19, 2008: Message edited by: Eric Pascarello ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60991
    
  65

You may want to check out the jQuery Dimensions plugin.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Originally posted by Eric Pascarello:
[EDIT: whoops! I missed the bottom part of your code where you did the same basic thing!]

I do not think JQuery has a position method built in...Not near Bear's book to check. But it is rather simple to do:



Example calling it:



Eric

[ June 19, 2008: Message edited by: Eric Pascarello ]


Wow that is crazy. so the for loop finds the element keeps going until it finds the parents. What is the parent? and what is the final parent then?


You may want to check out the jQuery Dimensions plugin.


This looks pretty cool. I got this other thing now so probably use that for now.
Sean Bradshaw
Greenhorn

Joined: Jun 19, 2008
Posts: 2
Ideal: Stop supporting IE.

Barring that as possible, IE does support an equivalent to pageX(Y):

ev.clientX + document.documentElement.scrollLeft would match it, so you have:

ev.pageX == (ev.clientX + document.documentElement.scrollLeft)
ev.pageY == (ev.clientY + document.documentElement.scrollTop)

So here's an easy function that returns an object.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60991
    
  65

Originally posted by Sean Bradshaw:
Ideal: Stop supporting IE.
Not a viable option (unfortunately) for commercial enterprises.

Besides, as he's already using jQuery, cross-browser issues aren't a problem as jQuery will normalize the event instance to hide any browser differences.

The issue here is that he's not really wanting the event coordinates, but the true position of a related element.
[ June 19, 2008: Message edited by: Bear Bibeault ]
Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Originally posted by Bear Bibeault:
Not a viable option (unfortunately) for commercial enterprises.

Besides, as he's already using jQuery, cross-browser issues aren't a problem as jQuery will normalize the event instance to hide any browser differences.

The issue here is that he's not really wanting the event coordinates, but the true position of a related element.

[ June 19, 2008: Message edited by: Bear Bibeault ]


Yes the true position of the element.

The way that I posted(and the way Eric did seems to work find).

I just don't understand the parent stuff. Like if you got

<div>
<p>he </p>
</div>

and your trying to say find the position of "p"; it will get the offset from the div's since thats it parent? but when does it stop? the body tag?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
When it runs out of parents. Hence for the loop saying while elem != null. It follows the DOM chain to the last parent.

Write a function like this and visualize what is happening. Use elem.tagName to spit out what tag you are looking at in the loop along with its offset properties.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Is there something better then event.pageX/Y?