This library seems to offer what you’re looking for: https://github.com/furf/jquery-ui-touch-punch#readme It also has some example use code (simply add the plugin): <script src=”http://code.jquery.com/jquery.min.js”></script> <script src=”http://code.jquery.com/ui/1.8.17/jquery-ui.min.js”></script> <script src=”jquery.ui.touch-punch.min.js”></script> <script> $(‘#widget’).draggable(); </script>
Set the touch-action CSS property to none, which works even with passive event listeners: touch-action: none; Applying this property to an element will not trigger the default (scroll) behavior when the event is originating from that element.
Kinda late, but you need to access the original event, not the jQuery massaged one. Also, since these are multi-touch events, other changes need to be made: $(‘#box’).live(‘touchstart’, function(e) { var xPos = e.originalEvent.touches[0].pageX; }); If you want other fingers, you can find them in other indices of the touches list. UPDATE FOR NEWER JQUERY: … Read more
If you return true from an ACTION_DOWN event you are interested in the rest of the events in that gesture. A “gesture” in this case means all events until the final ACTION_UP or ACTION_CANCEL. Returning false from an ACTION_DOWN means you do not want the event and other views will have the opportunity to handle … Read more
jQuery ui doesn’t have touch support. You should use it with jQuery-ui touch punch. Just add the script after jQuery ui: <script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script> <script src=”http://code.jquery.com/ui/1.8.21/jquery-ui.min.js”></script> <script src=”jquery.ui.touch-punch.min.js”></script> You can also use cdnjs: <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script> <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js”></script> Note: Better give this repo a star on Github.
I take it from your question that your hover effect changes the content of your page. In that case, my advice is to: Add hover effects on touchstart and mouseenter. Remove hover effects on mouseleave, touchmove and click. Alternatively, you can edit your page that there is no content change. Background In order to simulate … Read more
Setting CSS – pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE. Here’s a full list of values pointer-events can take.
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); Takes care of the problem, as it sets the highlight color transparent. Source: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
Start By going through the Fingerpaint demo in the sdk sample. Another Sample: public class MainActivity extends Activity { DrawingView dv ; private Paint mPaint; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); dv = new DrawingView(this); setContentView(dv); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setColor(Color.GREEN); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeWidth(12); } public class DrawingView extends View { … Read more
Found a solution (only tested with iPad until now!)! https://github.com/furf/jquery-ui-touch-punch