jQuery("#surface").bind("mousedown", function(e)
{
console.log("(x,y) = (" + e.pageX + "," + e.pageY +")");
});
I wrote this code but not track that it is touch event or swipe event.I want to call function which fired when swipe event start and end.When you touch a finger on iPad/iPhone and push and drag to left or right.I want finger touching starting position (x,y) cordinate and need (x,y) position when you drop a finger.
I also used jqTouch but it don't give me starting and ending position.
I want to make App which swipe page according to your finger.
------------ HTML ------------
<canvas id="surface">
// here goes all image pages
</canvas>
do you have any idea about how to detect swipe start and end event using jQuery or javascript but not touch event.
Have you looked at this plugin?
Also, if that's not feasible, what you're gonna need to do is set a timer on touchstart and touchend
FYI, I know jQuery plug site is broke, but you can find the download for that plugin here
Related
I have two divs, standing next to each other. In addition to click event I added a swiperight and swipeleft to do something. But when I add these swipe events, scroll doesn't work anymore on iPad. On PCs there's no problem!
Is there any other way to make them compatible with each other on iPad (touch screen devices)?
Merci!
Found a solution:
http://stephband.info/jquery.event.swipe/
Swipe events are a thin wrapper built on top of move events (stephband.info/jquery.event.move). Move events, by default, override native scrolling, as they assume that you want to move something rather than scroll the window. To re-enable scrolling, call e.preventDefault() inside a movestart handler.
In the example above, we want to be able to swipeleft and swiperight, but scroll up and down. Inside a movestart handler, the direction of the finger is moving is calculated and the event is prevented if it is found to be moving up or down::
jQuery('.mydiv')
.on('movestart', function(e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
});
I have a little web gallery that I added swipe navigation to for mobile browsers. I did it with pretty simple touchstart/touchmove/touchend event tracking.
The problem is that when I try to pinch zoom in the browser window it fails if any finger starts in the element I added the touch event handlers to, I'm guessing from the calls to preventDefault.
Is there a way I can track the touch events for navigating my images without blocking the zoom in and out feature of the browser? I don't mind blocking single finger scrolling if it's over my element, but I want to allow the pinch zooming.
Here's the code:
function addDragHandlers(eventDivId) {
var startX, endX;
var slides = $('#'+eventDivId);
slides.bind('touchstart', function(e) {
e.preventDefault();
startX = e.pageX;
endX = startX;
});
slides.bind('touchmove', function(e) {
e.preventDefault();
endX = e.pageX;
});
slides.bind('touchend', function(e) {
e.preventDefault();
if ( endX - startX < 0) {
// go to next image
} else if ( endX - startX > 0) {
// go to previous image
} else {
// do click action
}
}
});
}
What you want is ongesturestart, ongesturestart move and end work the same as on touch but for more than one finger. From their you can add a listener for:
event.stopPropagation();
to prevent "preventDefault()" from propagating in.
I wanted this to work on Android so I didn't want to use gesture events, which I have read are only on iOS - though I have no android to test that claim.
I then looked at a bunch of javascript gesture libraries which try to make gesture support easy. Unfortunately none of them worked well enough for my purposes.
So I ended up using touch handlers on the body to track all the touches on the page and then a custom heuristic to determine whether to use the touch to navigate the gallery or to use it to scroll/pinch the page.
It's still not perfect. If you start by touching my gallery element and then touching outside it the pinch doesn't work.
As an aside, the "TouchSwipe" jquery library has an incredibly well-designed and flexible API, but with the configuration I needed, tracking only horizontal swipes on my element, it was too quirky under iOS6 and hasn't been updated for a few weeks. If you are looking into this sort of challenge and it's a few months from now I'd recommend checking the updates for that plugin.
I am working on a touch based JS application, I've studied Flex and Royal slider as examples. I noticed that both sliders acting similarly when getting touchmove event:
var started,touched ;
el.bind('touchstart',function(e){
started = Number(new Date()) ;
// Get pageX and pageY etc...
}) ;
el.bind('touchmove',function(e){
touched = Number(new Date()) ;
if (started-touched > 500) {
// Handle touch moves etc...
}
}) ;
My JS app works seamless without these, but why do they need to do this? Why they are waiting 500ms to get move datas?
I believe this is some kind of sensitivity setting. You only want to register a touch-move (drag) event if the user has been moving his or her finger across the device for at least 500ms (in this example).
This could be useful to differentiate between taps and drags. Otherwise, if the user would slightly move his/her finger when clicking, for example, a button, the app would also register a drag. As some controls accept both events, this could lead to erroneous behaviour.
I'm working on some code that detects when you are scrolling the mouse up or down. I want the user to scroll left and right, instead of up and down. My code detects the mouse movements and whether it is up and down. My question is, is there code in jQuery or Javascript that allows the user to scroll left or right based on when an event happens, aka the mouse scrolling up or down?
jQuery.mousewheel + jQuery.scrollTo.
.mousewheel(function(e, d, dx, dy) {
$(this).scrollTo((dy<0?'+':'-')+'='+10*Math.abs(dy)+'px', 0, {axis: 'x'});
e.preventDefault();
});
Demo.
Tie a function to your user mouse up movement and use jQuery's scrollTo plugin. Here's a tutorial detailing it: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Hope this helps!
Working on a scrub bar for a chromeless player through youtube. I have the functionality working pretty much as Id like BUT when I click to drag the blue "seeker" button and drag it, it jumps back to its original position until I release the mouse click. Once I release, it starts the video at the appropriate position and draws the progress bar at the appropriate position too. code is here: http://jsfiddle.net/VysBU/1/
I also logged the position of the mouse and width of the progress bar (which is the part that jumps around) and the width values move consistently upward or downward on drag which doesn't make sense because visually, it jumps back and forth. Odd.
Any help is appreciated...if you need me to clarify something, let me know.
NOTE: just remembered...it tends to jump on vertical mouse movements only. ie, if i move the mouse horizontally without changing its vertical position at all, it 'animates' fine. if the vertical position does move, the 'animations' are erratic.
Check this out http://jsfiddle.net/sz4FF/
you need to stop the interval of
setInterval(animateProgress, 100);
when you begin seeking, and continue it when the seeking stops. The reason why it makes that jump is simply because animateProgress is called and sets the width of the playedBar and seeker.
I hastily added it to a global function (window.TEST_INTERVAL) just to check if it would work, and it does.
(how to initialize and clear the interval)
clearInterval(TEST_INTERVAL);
TEST_INTERVAL = setInterval(animateProgress, 100);
within seeking
function seeking(e){
clearInterval(TEST_INTERVAL);
within doneSeeking
function doneSeeking(e){
TEST_INTERVAL = setInterval(animateBuffer, 250);
UPDATE: IE8 and below problem
mousePos = e==undefined ? event.clientX : e.pageX;
//get the position of the mouse
//mousePos = e.pageX;
the event returned by onmousemove is "undefined" in ie7 and 8, that way we are checking for window.event.clientX, which shows the mouse position relative to the window. It seems to work fine but I believe that in a normal environment some minor tweaks might be needed