Geoffrey Emery
Tech Goodness

Multitouch in firefox

August 25, 2009 11:00 by Geoffrey Emery

 

Felipe Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the video above will make you pine for the day (not long!) where all laptop screens support touch 

We have three new DOM events (MozTouchDown, MozTouchMove and MozTouchRelease), which are similar to mouse events, except that they have a new attribute called streamId that can uniquely identify the same finger being tracked in a series of MozTouch events. The following snippet is the code for the first demo where we move independent <div>s under the X/Y position of each touch point.

PLAIN TEXT

JAVASCRIPT:

  1. var assignedFingers = {};

  2. var lastused = 0;

  3. function touchMove(event) {

  4. var divId;

  5. if (lastused <= 4) return;

  6. if (assignedFingers[event.streamId]) {

  7.     divId = assignedFingers[event.streamId];

  8. } else {

  9.     divId = "trackingdiv" + (++lastused);

  10.     assignedFingers[event.streamId] = divId;

  11. }

  12.   document.getElementById(divId).style.left = event.clientX + 'px';

  13.   document.getElementById(divId).style.top  = event.clientY + 'px';

  14. }

  15. document.addEventListener("MozTouchMove", touchMove, false);

  16. document.addEventListener("MozTouchRelease", function() { lastused--; },false);

You can check out code from all of the demos.


Tags:
Categories: Touch
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Related posts

Comments are closed