• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Jeanne Boyarsky
  • Ron McLeod
Sheriffs:
  • Paul Clapham
  • Liutauras Vilda
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
Bartenders:

Is there something better then event.pageX/Y?

 
Ranch Hand
Posts: 182
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
Sheriff
Posts: 67753
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67753
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
This will take every ounce of my mental strength! All for a tiny ad:
New web page for Paul's Rocket Mass Heaters movies
https://coderanch.com/t/785239/web-page-Paul-Rocket-Mass
reply
    Bookmark Topic Watch Topic
  • New Topic