Enhancing a website design for touchscreen devices to address issues like unintentional mouse dragging

Currently, I am in the process of creating a compact web-based kiosk interface specifically designed for a 7-inch touchscreen. The details of the system itself are not pertinent at this time; however, it is worth noting that the browser running on the touchscreen is a permanently full-screened Firefox operating on Ubuntu.

Upon successfully setting up the touchscreen, I proceeded to develop a simple test page featuring several large buttons. Upon testing the page on the touchscreen, I quickly realized that many rapid touch actions were mistakenly interpreted as mouse dragging. Consequently, text was being inadvertently selected, ghost images were being dragged around, and various other unwanted effects were occurring when navigating the web page.

In an attempt to eliminate these undesired visuals, I have already taken steps to remove the mouse cursor and prevent text selection on the page using some CSS:

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

Despite implementing these changes, there are still lingering issues. To illustrate these problems, I created a brief video demonstration: http://www.youtube.com/watch?v=4tjZ5aIG41E

For reference, here is the link to the test page showcased in the video: (please note that your mouse cursor will disappear on this page)

If anyone has suggestions or tips on how I can enhance the user experience by resolving these touchscreen issues, please feel free to share HTML/CSS solutions, JavaScript solutions, or Firefox configurations/addons.

EDIT - It may also be beneficial to mention that the touchscreen driver currently in use is eGalaxTouch, installed on Ubuntu.

javascripthtmlcsstouchscreenvisual-artifacts

Answer №1

This method is the closest I've come to preventing people from dragging, clicking, and selecting my DOM elements. Interestingly enough, Firefox seems to work the best ;)

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

You can apply this to the body element.

As mentioned in the comment, other adjustments may be necessary in terms of device settings, mouse settings, click speed, and drag duration.

Disabling the drag effect in browsers requires some DOM manipulation.

Preventing images and text from being selected

In IE, simply applying this class is sufficient. However, in other browsers, you may need to create an invisible (transparent) overlaid div. This allows for clicking on your content while preventing the dragging of elements beneath it. It may seem odd, but it gets the job done. Someone in the post offered a helpful solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered in App.js on line 29: Unable to access the property 'map' as it is undefined

Currently enrolled in the University of Helsinki Full Stack Open course, I am facing a challenging error while working on my React web app. The app retrieves data from the Rest Countries API (https://github.com/apilayer/restcountries) and I am trying to di ...

javascriptreactjs

How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right. I have a new client and they want their website to have a similar feel to . If you check out the index page and scroll down, there's this cool 'smooth animation& ...

htmlcssbackground-imagebackground-attachment

Widgets that opt for an <h3> for their title instead of the usual <h2>

(personal website) In my current theme, the widgets are displayed below the slider. For example, Rainy Day Promotion, Raves, etc. I would like all the titles to be shown as <h3> tags instead of <h2>. If anyone can provide me with guidance on ...

phphtmlcss

Validating textfields and dropdowns for dynamic HTML identifiers using jQuery

I am attempting to validate a dropdown and text field together. Both fields can either be left empty or both must be filled. The HTML ids are generated dynamically. I have tried the code below but it is not working as expected. Here are the resources I use ...

jqueryhtmlangularjs

What is the best method to access $(this) within a jQuery load callback function?

We have a piece of code that loads HTML into a div with the class "content". Within this div, there is an element with the class "link" which contains data-href and other data-* properties. The code snippet is as follows: $(document).on('click', ...

javascriptjquery

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging. The select element in qu ...

htmlcssformscss-animations

Update the DIV element's class to reflect whether the quiz answer provided is correct or incorrect

I am facing a challenge while attempting to assign a CSS class to a dynamically created element in JavaScript. The error I'm encountering pertains to the reference issue with the trackerMarker element within the event listener functionality. Although ...

javascripthtml

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

javascripthtmlcanvaskineticjs

Tips for extracting a value from a mongodb aggregate operation

I am attempting to retrieve a value from a MongoDB aggregate in order to display it on an EJS page using the totalAmount variable. The result I am currently receiving is [{"totalAmount":42}] and my goal is to extract only the number, in this case, 42. My ...

javascriptnode.jsmongodbejs

PHP is sending incomplete email messages

After implementing a PHP script to send an email upon unsubscribing, I encountered an issue where only part of the email was being sent. Here is a JSFiddle example that represents how the complete email should look, although it may not appear neat due to b ...

phphtmlemail

A guide on dynamically integrating CKEditor into Vue.js 3, exclusively for the client side

I am facing a challenge with integrating CKEditor 5 into my Vue.js 3 application, particularly in ensuring that it is only loaded on the client-side. Due to server-side rendering limitations, I need CKEditor to be included dynamically based on the browser ...

javascriptvue.jsckeditorvue-componentvuejs3

Ensure that the placeholder text does not contain any null or empty values

I'm currently working with a dust.js template that generates input fields based on data received from the server. The issue I'm facing is that even when the data is empty, an input box with an empty placeholder value still gets rendered. Is there ...

javascriptjquerydust.js

Is there a way to link to mouseover and mouseleave actions while utilizing ng-options?

I am trying to create a directive that will handle the mouseover and mouseleave events for the option elements within this select element: <select class="form-control" custom-directive="" ng-model="vm.selectedPersonalInfo" ng-options="personalInfo as p ...

javascriptjqueryangularjsangularjs-ng-options

How can numbers be translated into letters?

I have a new security feature for my system where users are required to enter obscure user IDs on their phones. To achieve this, I want to encode the IDs in such a way that guessing them becomes challenging. My plan is to convert the IDs into base-23 numbe ...

javascriptnode.js

Save the value of an AngularJS expression to the clipboard upon clicking

Is there a way to copy the result of the angular expression {{ page.url }} to the clipboard when clicked? I attempted to use ng-clipboard after installing the directive in my project, but it didn't work as expected. <a ng-show="page.hovered" class ...

javascriptangularjs

Navigating data attributes with jQuery

I'm encountering some difficulties with the following code, and I'd appreciate some guidance on the process, please. Below is the HTML snippet: <span data-credit-name="Name_1"><strong>1</strong> Name 1</span><br /> ...

javascriptjquery

Finding the length of a filter in an AngularJS directive

I'm trying to figure out how to retrieve the value of filtered.length within my custom directive called my-dir. <li my-dir ng-repeat="result in filtered = (results | filter:query | orderBy: 'title')"> <h1>{{ result.title }}& ...

javascriptangularjsangularjs-directive

Tips for navigating libraries with Google CAJA

Is there a way to configure Google Caja to allow specific libraries to work without being sanitized? I have my own CAJA server and an application based on NodeJS. I'm providing users with code that is mostly related to charts and graphs, but certain ...

javascriptnode.jsd3.jsgoogle-caja

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Recently, I implemented a fetch feature using TypeScript for my NextJS 13 project. As I am still getting familiar with TypeScript, I wanted to double-check if my approach is correct and if there are any potential oversights. Here is the code snippet from ...

javascriptjsontypescriptfetch-apinext.js13