• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Is there something better then event.pageX/Y?

 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
[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
Pie
Posts: 64961
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You may want to check out the jQuery Dimensions plugin.
 
Michael Hubele
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64961
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 182
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic