Struggling to implement touch event functionality for CSS3 spotlight effect

I'm experimenting with implementing touch events on an iPad to achieve a certain effect. Currently, I have it working smoothly with mouse events on JSFiddle at this link: http://jsfiddle.net/FwsV4/1/

However, my attempts to replicate the same effect using touch events on this version http://jsfiddle.net/FwsV4/3/ have been unsuccessful.

I must admit, navigating touch events is somewhat overwhelming for me, and I'm struggling to convert mouse clicks/moves to touch gestures effectively. I want to ensure that the elements underneath remain interactive by incorporating touch start/end events, but I'm unsure of the best approach.

If anyone could offer guidance or point me in the right direction, I would greatly appreciate it!

javascriptjquerycsstouch

Answer №1

The primary issue you need to address is binding to touchstart in order to prevent the page from scrolling. A simple solution would be:

$('myElement').htmlElement.bind("touchstart", function(event) {
    event.preventDefault();
  }
);

It may also be beneficial to retrieve coordinates from this action. Here is a helpful tutorial on touch events:

Your second issue lies in setting the element to a height and width of 5000px, as iOS will zoom to fit the entire page by default. You should adjust this or employ the viewport tag to alter zoom behavior (refer to viewport apple docs).

The provided code snippet is incorrect as it returns a Boolean value rather than one of the intended objects.

  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

The corrected version should be:

 var touch = e.originalEvent.touches[0] ? e.originalEvent.touches[0] : e.originalEvent.changedTouches[0];

However, with touchmove, focus on e.originalEvent.touches[0] if single finger touch events are the target.

Avoid using inline js and separate file js in this way, as it can make tracking more challenging. Also, consider developing on a regular web server or local files instead of jfiddle when working with touch events.

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

The tree expansion does not activate the CSS transition

Currently, I am in the process of creating a TreeView using only CSS and JS. My goal is to include a subtle transition effect when expanding or collapsing a node. The transition effects are successfully implemented for collapsing nodes, however, they do no ...

javascripthtmljquerycsstransition

Updating an element's HTML content from a template URL using AngularJS

Can someone help me figure out how to set the html of an element in my directive based on a dynamic template url? element.html('some url to a template html file'); rather than using element.html('<div>test</div>').show() ...

javascriptangularjsangularjs-directive

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

React SVG not displaying on page

I am facing an issue with displaying an SVG in my React application. Below is the code snippet: <svg className="svg-arrow"> <use xlinkHref="#svg-arrow" /> </svg> //styling .user-quickview .svg-arrow { fill: #fff; position: ...

javascriptreactjssvg

Combining and adding together numerous objects within an array using JavaScript

I'm looking to combine two objects into a single total object and calculate the percentage change between the two values. I'm encountering some difficulties while trying to implement this logic, especially since the data is dynamic and there coul ...

javascriptjqueryangularjs

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer

I am encountering some challenges with the CSS on my website. I developed the site without considering Internet Explorer, and now that I am trying to address IE bugs, it feels like a daunting task. How do you approach debugging in situations like these? ...

css

The error message "invalid date" is appearing while trying to calculate the time difference with moment.js

I'm having trouble figuring out the time difference in hours and minutes between two form fields. I keep getting an error message saying "Invalid Date." I've attempted to modify other examples to fit my requirements, but without success. The inpu ...

javascriptphpmomentjs

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

I'm sure this question may seem simple to some, but as a JavaScript novice, I couldn't find the answer myself. Here is the code snippet I'm working with: Let map = new Map<String,String> map.set('0', select) map.set('1&a ...

javascripttypescript

Adding elements in an array depending on the values in a separate array

I am currently working on a task that involves summing values in an array of objects based on the Ids present in another array within the same object. Let's assume I have the following queryArray: const queryArray = [ "1" , "2" ] ...

javascriptarraysalgorithm

A guide to incorporating nested loops with the map method in React JS

I've come across numerous threads addressing the nested loop using map in React JS issue, but I'm still struggling to implement it in my code. Despite multiple attempts, I keep encountering errors. Here are some topics I've explored but cou ...

javascriptreactjs

Exploring the PayPal Checkout JavaScript SDK's CreateOrder call and interpreting the response

I am currently exploring how to use the JavaScript SDK to display PayPal payment buttons on a website. I am new to working with JSON and REST API calls, so I am facing some challenges in implementing this. The createOrder function is running smoothly and ...

javascriptjsonpaypalpaypal-rest-sdk

Hide and display elements in a jQuery Mobile listview, but search functionality is disabled

Encountering an issue with Jquery Mobile 1.2 where a listview child that is hidden and then shown cannot be searched properly. To see the problem in action, check out this example. When loading the page, two listview children and a search box are created ...

jquerylistviewsearchmobilehide

Is it necessary to have nodejs, or can I just depend on Nginx alone?

I am currently in the midst of a discussion with my colleagues regarding whether or not to incorporate node.js into our application. We have decided to utilize angular.js for the front-end and communicate with the app server through a REST api. The app ...

javascriptnode.jsangularjsnginx

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...

javascripthtmlangularjsfirebasefirebase-realtime-database

Is the error message "not a function" appearing when calling a function from a parent to a child?

I am trying to understand parent-child relations in React as I am new to it. In my understanding, the following scenario should work: I have a parent component called <Home/> and within it, there is a child component called <ProjectDialog>, wh ...

javascriptreactjsmaterial-ui

Looking for assistance grasping the concept of using a for loop in MongoDB's aggregate method

This code snippet is designed to maintain the order of an array (var list) when utilizing mongoDb's $in clause effectively. Although, I must admit that the logic behind it is not entirely clear to me. I can see that it's iterating in reverse to ...

javascriptmongodbaggregation-framework

Iterate over the object to verify if the field contains an empty array, then output null

Looking for help with handling empty arrays in an object: productDetails: { cislife: [], prime: [] } Is there a way to have null returned instead of an empty array if no values are available? For example, I'd like to determine if either t ...

javascriptecmascript-6

How to make background color transparent in CSS for Safari browser

Does anyone know how to make the background color transparent in Safari? Right now, my PNG file is showing with a white background instead of being transparent. I have attempted: background-color: transparent; background-color: rgba(255,255,255,0); appe ...

csssafari

Enhance fullness to facial features

Creating walls by forming faces using specific points is a successful process for me. However, I am now looking to add thickness to these walls, and I am unsure of the best approach. Below is the code I currently use to create the walls: makeWall(start, ...

javascriptthree.js