andreannast
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by andreannast
-
-
I found a solution for the problem. The issue was that in the function getCursorPos(e) there is this line of code that returns NaN when the user is using a touch screen instead of a mouse.
x = e.pageX - a.left
This was because e.pageX doesn't work with touch and returns NaN. I needed to use e.touches[0].clientX instead. So I wrote an IF statement that was checking if the user has a touch device. If so then I used the e.touches[0].clientX, if not I used e.pageX to find the coordinate. Below is the complete function with the changes:
function getCursorPos(e) { var a, x = 0; e = e || window.event; if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){ x_coordinate = e.touches[0].clientX; } else{ x_coordinate = e.pageX; } /*get the x positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x coordinate, relative to the image:*/ x = x_coordinate - a.left; /*consider any page scrolling:*/ x = x - window.pageXOffset; return x; }
If anyone has a better solution I would be happy to hear it.
-
This example of an image comparison slider isn't working with touchscreens even though it is supposed to. I don't understand why. Sometimes it will move just a bit but most of the times not at all. Can someone point me in the right direction?
Top border on Wordpress site
in CSS
Posted
Is your website live? If you send me a link I could maybe help you select the menu bar.