Crazy sexy Firefox multitouch demo

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:

var assignedFingers = {};

var lastused = 0;

function touchMove(event) {

var divId;

if (lastused <= 4) return;

if (assignedFingers[event.streamId]) {

divId = assignedFingers[event.streamId];

} else {

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

assignedFingers[event.streamId] = divId;

}

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

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

}

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

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

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.

Filipe is one of the amazing interns that has worked at Mozilla this summer. Summer at Moz is a fantastic experience with them around. It is a shame to see them go, but I can't wait to see what Filipe and the others get up to next!

5 Comments »

Comments feed TrackBack URI

Wow this is extremely cool. Kinda wish I had a tablet so I could play around with this when it’s added to Minefield.

Btw, you guys forgot to close the anchor tag for “code from all the demos” link. The last two paragraphs are a giant link, as well as the rating stars. :)

Comment by iliad — August 22, 2009

Lol fail

Comment by Darkimmortal — August 22, 2009

Wow, this is awesome, I had no idea you could do this.

Comment by cancelbubble — August 23, 2009

this its great! when we can use this feature>??????? :D
btw, Filipe is Felipe xD

@Darkimmortal fail what?

Comment by marlonbtx — August 24, 2009

Ajax Questions and Answers

Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...

JQuery Function Not Defined?

Hi there,

I'm trying to set a php session variable from a radio button. The idea is that a jquery function is called which...

IE 8 Crashing Problem
Hello Everyone, Here\'s the situation: two iSeries boxes - Dev and Prod both V5R4M0 We\'re using AJAX to dynamically load content using a tabbed...