title: Optimizing a web interface for touchscreens (dealing with unwanted mouse-drag, etc)
body: <p>I'm building a small web-based kiosk interface to be used on a 7-inch touchscreen.  I won't get into detail about the system itself, but the browser on the touchscreen is a permanently full-screened Firefox running on Ubuntu.</p>
  
  <p>After I got the touchscreen working, I wrote a simple test page with a bunch of big buttons.
  Trying it out on the touchscreen, I immediately noticed that a lot of quick touch actions are interpreted as dragging the mouse.  So text was being highlighted, ghost-images were getting dragged around, and everything else that happens when you randomly click and drag over a web page.</p>
  
  <p>I want to remove all of these unwanted visuals and have the page just register the button as pressed, and ignore any dragging that happens.  I already removed the mouse cursor itself and prevented text selection on the page with a little CSS:</p>
  
  <pre><code>* {
      cursor: none;
      -moz-user-select: none; /* mozilla browsers */
      -khtml-user-select: none; /* webkit browsers */
  }
  </code></pre>
  
  <p>A lot of funky stuff is still happening, though.  I took a short video to demonstrate: <a href="http://www.youtube.com/watch?v=4tjZ5aIG41E" rel="nofollow">http://www.youtube.com/watch?v=4tjZ5aIG41E</a></p>
  
  <p>Here's the test page from that video: <a href="http://www.depotstreetmarket.com/touch-test/" rel="nofollow">http://www.depotstreetmarket.com/touch-test/</a>  (warning: your mouse cursor will disappear on that page-- sorry)</p>
  
  <p>Anyone have any tips to help me make my pages more polished when using the touchscreen?  I'm open to HTML/CSS solutions, Javascript solutions, and Firefox configurations/addons.</p>
  
  <p><strong>EDIT</strong> - It might help to mention that the touchscreen driver I'm using is <a href="http://home.eeti.com.tw/web20/eg/Touch_Drives.html" rel="nofollow">eGalaxTouch</a>, installed on Ubuntu.</p>