Search code examples
jquerytouchscrollviewtouchscreen

jQuery - Updating a script to support touchscreens (scrollview)

I have been using the jQuery scroll view. The script does not appear to support touchscreens so I've spent the better part of a day trying to figure out how I might add touchscreen support to the script.

I considered switching over to jQuery draggable, but it just doesn't work in the same way that the above script seems to work.

Could someone give me some pointers or tips on how to add touch support to this?

Solution

  • Use jquery.mouse2touch.min.js plug-in to simulate mouse events for touch events.

    Working DEMO

    Note: I saw that you did some code changes in original plug-in jquery.scrollview.js to add touch events. Please use original one, $("#elment").mouse2touch() apply mouse event handler behavior to touch events.

    Steps to apply this FIX

    Below is the code

    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//increstedbutte.com/wp-content/themes/crestedbutte/style.css" />
</head>

<body>
  <h1>Scroll Demo Plunker!</h1>
  <div id="map">
    <div id="spring" style="opacity: 1;">
      <img width="3800" height="1200" src="http://increstedbutte.com/wp-content/uploads/2013/07/crested-butte-town-map_spring-v2.jpg" class="attachment- wp-post-image" alt="Crested Butte Town Map - Spring">
    </div>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//jquery-scrollview.googlecode.com/svn-history/r2/trunk/jquery.scrollview.js"></script>
  <script src="//cdn.rawgit.com/vpanga/jquery.mouse2touch/master/src/jquery.mouse2touch.min.js"></script>
  <script>
    $(function() {
      $("#map").scrollview().mouse2touch();
    });
  </script>
</body>

</html>