• Visitors can check out the Forum FAQ by clicking this link. You have to register before you can post: click the REGISTER link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below. View our Forum Privacy Policy.

HTML: Translating touch events to relative

  • Filter
  • Time
  • Show
Clear All
new posts

    HTML: Translating touch events to relative

    This is one of those "I can't believe it's this hard" problems.

    I need to translate a mouse press or touch on a web page to a div's local coordinates. Any sensible system would do this for you, but that's too simple for the folks behind the HTML standards. After a lot of faffing, I've come up with this (ignoring x for brevity):

    function onTouchStart( ev )
    e = new Object;
    e.y = ev.touches[0].pageY;
    // translate
    r = rootDiv.getBoundingClientRect();
    e.y -= r.top;
    e.y -= window.scrollY;
    If I have a DIV that starts 300 pixels down the page and I touch its top left, e.y = 300 and r.top is 300, and so it works. If the window is scrolled down so my div is at the top of the window then r.top is now 0 because it's offset by the scroll position (bizarrely - I don't know why anybody would think that's how it should be) which is why you also need to subtract the scroll position.

    This is fine. Until I zoom in on Android (Chrome).

    Once zoomed if I scroll so my div is at the top r now doesn't take into account the scroll position, so that r.top is 300 and scrollY is 300 and I therefore end up 300 pixels out.

    So how the ***** am I meant to make that work? Is there some alternate strategy?

    Any insights?
    Will work inside IR35. Or for food.

    I suspect you are trying to reinvent the wheel.

    Try looking at a library:

    Hammer.JS - Hammer.js
    Daniel Glyde: TouchIt: jQuery Plugin for Touch events


      Not really. I'm just trying to use the wheel; it's other people that have implemented it wrong.

      Found a bodge. Basically create a DIV at 0,0 and then call its getClientBoundingRect() and measure the distance. Then the error cancels itself out. Phew.
      Will work inside IR35. Or for food.