jQuery

Question

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?

Koti Panga · Accepted Answer

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

After including jquery.min.js
Include original plug-in for jquery.scrollview.js
Include plug-in jquery.mouse2touch.min.js
Now you can map mouse events to touch events with this line $("#map").scrollview().mouse2touch()

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>

FrancescoMM · Answer

Just include some touch events to mouse events translation layer, like this:

https://github.com/danielglyde/TouchIt

adding a $("#yourElement").touchIt(); call in your code will convert every touch event for that object to a mouse event and it should work perfectly as every touchstart is translated to a mousedown and so on.

Be careful though, that if your touchable surface is too large, it may prevent users from scrolling the page. [ https://code.google.com/p/android/issues/detail?id=19827 ]

Bojan Petkovski · Answer

I was having the same problem. First I switched to jQuery UI and tried to make this work with draggable, but was not what I wanted. Then I found a great plugin called pep. It has the same option like jQuery UI but works much beeter, and also works on mobile and has a kinetic drag.

Here you can check the script and see the demos http://pep.briangonzalez.org/

Hope it will help you out :)

Here you can check the script and see the demos http://pep.briangonzalez.org/

Hope it will help you out :)

jQuery - Updating a script to support touchscreens (scrollview)

Tags:

touch

scrollview

touchscreen

Zach Nicodemous

3 Answers

Koti Panga

FrancescoMM

Bojan Petkovski

Recent Activity

Donate For Us