W3schools example for "Image Comparison Slider" isn't working with touch screens.

[andreannast]

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?

[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.

Edited April 22, 2021 by andreannast