Anyway to find svg node via pixel coordinates

[WakeRider]

I think I've backed myself into a corner, but here's goes...

background:
I used Rapheal to generate a map where each county is a raphael node.
Each node has mouse events that cause that county to highlight and
display info when the mouse passes over. Works great on non touch
devices.

Issue.
I am moving this to an ipad and with current coding each node has
mouse event handlers which triggers the node to highlight or
unhighlight. This doesn't work on an ipad since only the original
touchstart node registers all events until that touchends.

So I need a way to have a touchstart event trigger anywhere on the
screen, but when the finger passes over any raphael node object, that
object highlights. I feel this isn't possible and so my solution will
be to find the finger x,y position and then determine via javascript
which node is at that x,y position. Anyone have any clue how to do
this, ie find a raphael node knowing only a screen x,y coordinate?

[Clifford Heath]

On 10/06/2011, at 12:48 AM, WakeRider wrote:
> I think I've backed myself into a corner, but here's goes...

> ... find the finger x,y position and then determine via javascript

> which node is at that x,y position. Anyone have any clue how to do
> this, ie find a raphael node knowing only a screen x,y coordinate?

I do this in <http://github.com/cjheath/Raphaelle>, my drag/drop
extension.
You can pinch the code from there. No, it wasn't (that) easy - Chrome in
particular is buggy and I have a work-around.

Clifford Heath.

[Clifford Heath]

On 10/06/2011, at 12:48 AM, WakeRider wrote:

> I think I've backed myself into a corner, but here's goes...

> ... find the finger x,y position and then determine via javascript

> which node is at that x,y position. Anyone have any clue how to do
> this, ie find a raphael node knowing only a screen x,y coordinate?

I do this in <http://github.com/cjheath/Raphaelle>, my drag/drop

[August Patterson]

Clifford, thanks for the link.  I'll dig through it this weekend, but I did find a solution at least for the ipad.  Not sure yet how cross browser friendly it is though.  

The solution uses a call I wasn't aware existed.  document.elementByPoint( x, y);

<div id="page" ontouchmove="retrieveElement(event)"/>

...

function retrieveElement(event)

{

     var t = event.touches[0],

          el= document.elementFromPoint(t.pageX ,t.pageY),

          county = $(el).attr("county"));   //each Rapheal node/element has a attribute called county

     if(county)

     {

        highlightCounty(el);

        displayCountyStates(county);

      }

}

--

You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[Ed Davies]

Thanks, could be handy to know about.

Note for anybody reading this who might miss something: at least in
Firefox 3.6.17 there's no document.elementByPoint as named in the text
but there is a document.elementFromPoint as named in the code snippet.
Ditto Chromium 11 and Opera 9.64.

[August Patterson]

Good catch, that was my fault with the typo.  elementFromPoint() is correct.