2

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.

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.

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:

* {
    cursor: none;
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit browsers */
}

A lot of funky stuff is still happening, though. I took a short video to demonstrate: http://www.youtube.com/watch?v=4tjZ5aIG41E

Here's the test page from that video: http://www.depotstreetmarket.com/touch-test/ (warning: your mouse cursor will disappear on that page-- sorry)

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.

EDIT - It might help to mention that the touchscreen driver I'm using is eGalaxTouch, installed on Ubuntu.

Mike Turley
  • 1,172
  • 1
  • 9
  • 26
  • You could try XULRunner from Mozilla (it's what Firefox is built off of) and get full control over the browser. No buttons, no interaction with the OS, nothing. Just a browser (you have to code it, but that's done in JavaScript and XUL, like HTML). – Blender May 17 '11 at 15:38
  • you might want to set mouse(tap) setting in the control panel as well to enable quick tapping and long hold for dragging. There is not CSS to make short clicks better than long clicks.. – Piotr Kula May 17 '11 at 15:39
  • I've known about XULRunner for a while but always considered it to be a bit over my head. Maybe I'll actually check it out this time. – Mike Turley May 17 '11 at 16:01

1 Answers1

1

This is however the closest i got to stopping people from dragging, clickcing and selecting my DOM elements. Firefox works the best ;)

.selectDisable {-webkit-user-select: none;  -khtml-user-select: none;   -moz-user-select: none; -o-user-select: none;    user-select: none; }

you could apply that to the body

The other stuff- like i mentioned in the comment- you might have to set device settings.. mosue settings and set the clicks to quick- and the drags to extra long.

But disabling the drag effect in browsers needs some DOM tweaking

Preventing images and text to be selected

In IE applying this class is enough. In other browsers you have to make an invisible(transparent) overlaid div. So you can click your stuff but the div actually prevents dragging of the elements behind it.. Its wierd.. but it works. Somebody in the post had a good answer.

Community
  • 1
  • 1
Piotr Kula
  • 9,597
  • 8
  • 59
  • 85
  • Yeah, a few user-select styles are already on my page. They work great for preventing text selection, but elements can still be dragged around :( I wish there was a way to turn that all the way off. Mouse settings are another thing I've been messing with without too much success.. the eGalaxTouch settings are awful. – Mike Turley May 17 '11 at 16:00
  • as to the "dragging" it is a pain. Ok in IE- just applying that class stops it. IN webkit/FF you need to put an entire DIV overlaid(max width/height)(transparent) and with that style! Then the dragging will no happen – Piotr Kula May 17 '11 at 16:22
  • I had a post with an example somewhere-- i just cant find any thins in SO.. where is the search my posts and comments. jeez Sorry man- try to search my posts.. – Piotr Kula May 17 '11 at 16:26