Activate your free membership today | Log-in

Saturday, August 22nd, 2009

Crazy sexy Firefox multitouch demo

Category: Browsers, Firefox

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.

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!

Posted by Dion Almaer at 5:59 pm
5 Comments

++++-
4.6 rating from 27 votes

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

January 1999 Motorola 328cAlthough plus size mother of the bride dressesthe first flip phone in should be sooner, but this clamshell phone is just an integrated microphonemother of bride dresses is not in the usual sense we are now referred to flip.Column Strapless Satin Tulle Wedding Dress Most of the time we are actually referring to folding clamshell handsets, but Motorola’s first cheap prom dressesclamshell phone is the famous “palm-sized” – 328c. The phone is the beginning of in the domestic market and ghetto prom dressescan be received in English and Chinese text, but it does not support sending text messages in Chinese, which is sorry. Column Satin Organdie Lace Wedding DressHowever, clear call quality and handsome appearance are popular at the time this phone place.wedding dress

Comment by wuwei — November 10, 2009

Leave a comment

You must be logged in to post a comment.