I built a touch/mouse friendly jQuery plugin. It works on phones(ios, android...) and desktops browsers. But i have some issues with Windows 8 Chrome installed on laptop with touch screen. Unfortunately i dont have such a device and cant do any tests.Also IE10 works fine.
Let me explain you what i have inside(very simplified code):
1.Check is touch device:
base.isTouch = ("ontouchstart" in document.documentElement);
2.Get proper events
if(base.isTouch === true){
//use touch events:
"touchstart.owl",
"touchmove.owl",
"touchend.owl"
} else {
//usemouse events
"mousedown.owl",
"mousemove.owl",
"mouseup.owl"
}
3.Check touch events:
if(base.isTouch === true){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
link to real code
I think problem with chrome is that detect my touch events but use mouse events instead and translate them to touch.
I can add mouse and touch events together:
$('elem').on('mousedown.owl touchstart.owl',func);
Which is OK but then i have a problem with event.touches[0].pageX
link to plugin landing page
Thanks!
Problem solved
To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
To get mouse and touch events working together on windows 8 chrome with touchscreen i had to:
1.add two events on one element "touchstart.owl mousedown.owl"
2.check "event.touches":
if(event.touches){
x = event.touches[0].pageX
y = event.touches[0].pageY
} else {
x = event.pageX
y = event.pageY
}
The simplest solution is to include Touch Punch plug-in http://touchpunch.furf.com/
I did it for my project and it works well - U can test it, here is my project:
http://englishtotheworld.com/
Related
When a user is on a touch screen device, I'd like to restrict diagonal scrolling - so the idea is to force scrolling one direction at a time - horizontal or vertical.
I've set up a JS Fiddle that detects if touch scrolling is enabled and I'm able to output the x and y coordinates. But I don't see an offset or anything and figure I need that to calculate the intended direction.
I know that apple uses a directionalLockEnabled that will restrict, so I'm wondering if something like this is available in Kendo. If not, maybe there's a way I can figure out which direction the user is intending to scroll in and 'freeze' the other coordinate.
A JS fiddle I created (relevant part in the dataBound method):
http://jsfiddle.net/dmathisen/tskebcqp/
(the relevant code only works on touch... but should work if you enable mobile emulation in dev tools)
Another issue is the amount of times the scroll event is triggered. When working, maybe I can set up a debounce to handle how often it's triggered.
If you want to use javascript for this fix, you can calcul the ranges of the X and Y moves.
For that with touch devices, set the start posi X and Y when touchstart and calcul the distances when touchmove
var touchY = touchX = 0;
$(document).delegate('.yourWrap', 'touchstart', function(e){
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
$(document).delegate('.yourWrap', 'touchmove', function(e){
if (Math.abs(touchX - e.originalEvent.touches[0].pageX)
> Math.abs(touchY - e.originalEvent.touches[0].pageY)) {
// Block overflow-y
} else {
// Block overflow-x
}
touchX = e.originalEvent.touches[0].pageX;
touchY = e.originalEvent.touches[0].pageY;
});
For wheel devices, compare delta
(e.wheelDeltaY/3 || -e.deltaY)
(e.wheelDeltaX/3 || -e.deltaX)
I have a website page and I've added to the body of the page touch events.
More exactly for swipe right and swipe left. Since the event listener is added to the body of the page and I have added event.preventDefault(); i can't scroll the page any more.
How can i scroll the page in the browser ?
P.S. The code is pure javascript / library agnostic.
Edit #1. This site viewed in mobile seems to do it http://swipejs.com/ . It slides the tabs right to left and back as well as scroll the website. I just can't seen in the code how :(
Use iscroll plugin. it's help to you.
see example : http://cubiq.org/dropbox/iscroll4/examples/simple/
Unfortunately there is no easy answer. The best way is to build smart gesture recognizers. Or use something like this (for Safari Mobile):
http://mud.mitplw.com/JSGestureRecognizer/#single-gesture
You will notice that when you are touching a gesture recognizer, there is no scrolling. However, you could make the callback of a recognizer scroll the page.
Wondering why it only says it supports Safari mobile? That's because Safari mobile has its own set of touch events. However, you can use it as a start and try to add support for other platforms.
I have the same problem that swiping without "preventDefault()". Because I want to achieve a pulltorefresh's effect, I can only prevent the pulldown event but not pullup. The code like this:
function touchBindMove(evt){
//evt.preventDefault();
try{
var deviceHeight = window.innerHeight;
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
if((y - offsetStart) > 0 && document.body.scrollTop == 0){
evt.preventDefault();
var page = document.getElementsByClassName('tweet-page')[0];
var rate = 0;
end = x;
offsetEnd = y;
rate = (offsetEnd - offsetStart) / (2 * deviceHeight);
//tool.print(rate);
easing.pullMotion(page, rate);
}
}catch(e){
alert(e.message);
}
}
"y - offsetStart" judges whether the event is pulldown and "document.body.scrollTop == 0" judges the scrollbar is in the middle or not.
Maybe it can help you a little bit.
I want to make a web page on mobile devices (both Android and iOS) with fingers swipe effect, but when I add event.preventDefault() into ontouchstart / ontouchmove / ontouchend callback functions the scroll bar of the web page is being disabled, it is a disaster :(
I made an ugly hack for this with scrollTop so that the page can be scrolled:
element.ontouchmove = function(event) {
event.preventDefault();
var oldScrollTop = document.body.scrollTop;
var dist = final_y - start_y // here start_y is pageY from touchstart and final_y is current pageY
document.body.scrollTop = oldScrollTop - dist > 0 ? oldScrollTop - dist : 0;
//...
}
It works now but I still want to know:
It is there any other better solutions about this?
Why we must use "preventDefault()" in the callback functions? what we have prevented by this?
Thanks.
On Safari, you can get the location of where the user touched the screen from event.pageX and event.pageY. However, on my Android browser, event.pageX and event.pageY are always 0. Is there any way to get the location of a touch event in the browser on Android?
This is from memory, since I don't own an Android device anymore, but I think it's right. At the very least, it should get you started in the right direction. Good luck.
var elem = document.getElementById('elem');
elem.addEventListener('touchend', function(e){
var pageX = e.changedTouches[0].pageX,
pageY = e.changedTouches[0].pageY;
}, false);
I'm really struggling on an Android app in Phonegap and JQuery.
All I want to do is bind a touchmove to an element and then check the X and Y coordinates as I move my finger (a drag, basically)
$('#someElm').bind('touchmove',function(event){
//Code here..!
});
The touchmove fires when I touch the screen, but then I don't really know what the objects of the event are - I've tried event.screenX, event.pageX, but the don't work.
Any ideas?
Here the reference for mobile safari (android is basically the same):
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
what you want is:
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...