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.
