The Ashes

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 (my son thinks they are already 😉

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.  
2. var assignedFingers = {};
3. var lastused = 0;
4.  
5. function touchMove(event) {
6.   var divId;
7.   if (lastused <= 4) return;
8.   if (assignedFingers[event.streamId]) {
9.     divId = assignedFingers[event.streamId];
10.   } else {
11.     divId = “trackingdiv” + (++lastused);
12.     assignedFingers[event.streamId] = divId;
13.   }
14.   document.getElementById(divId).style.left = event.clientX + ‘px’;
15.   document.getElementById(divId).style.top  = event.clientY + ‘px’;
16. }
17.  
18. document.addEventListener(“MozTouchMove”, touchMove, false);
19. document.addEventListener(“MozTouchRelease”, function() { lastused–; }, false);
20.  

You can check out code from all of the demos.

We’ll also add CSS support to detect touchscreen devices. Using the pseudo-selector :-moz-system-metric(touch-enabled), you can apply specific styles for your page only if it’s viewed by a touchscreen user. That, along with physical CSS units (cm or in), makes it possible to adjust your webapp for a touchscreen experience.