does not appear to work on jQuery1.7.2

Amazing plugin, very happy with it!

But I'm using it on a site where I have a jQuery event when an image is 'tapped' or clicked to reveal a YouTube iFrame video underneath.

This seems to be disabled when I select the container div for TouchSwipe.

Any ideas why? How do I make TouchSwipe use a div that surrounds the body without causing issues with the layers (divs) underneath it?

Hello Folks,

First, congrats for the amazing plugin. I'm building a swipe based navigation interface, that scrolls the content left, right, up and down, my problem is, i have to allow the user to swipe in only one axis at a time, so, if it starts swiping up or down, it have to remain only in up and down motion, otherwise, it gets very weird when it starts movind sideways after it already started moving up or down.

I'm using swipeStatus do give the visual feedback for the starting motion, and the apropriate swipe(left, right, up or down) to handle the rest of the animation and content change, once the swipe has been triggered. If anyone could help, i'll apreciate very much!

swipeStatus:function(event, phase, direction, distance, duration, fingerCount) {
            if(direction=="right"){
                $(content[atual0][atual1]).css({
                    "left":distance+"px"
                });
                $(content[atual0][atual1].backimage).css({
                    "left":distance+"px"
                });
            }else if(direction=="left"){
                $(content[atual0][atual1]).css({
                    "left":-distance+"px"
                });
                $(content[atual0][atual1].backimage).css({
                    "left":-distance+"px"
                });
            }... etc..etc..

Hallo,

i have the follow problems:

If i create an Adobe Edge Animation wich works with jquery and after that i upload the source-files on the ipad with IOS 6. I try to use all Animations but it fails.
The First Animation works fine and is interactiv but if i swipe to the next site the follow animations is freezed. All pages after the first animation are freezed!

Of course i have read other Issues on github about these topic but nothing works.
I have seen the follow Topic but it doesnt work: (or i dont know what iam doing with these sroucefiles)

https://gist.github.com/3798925

Adobe Edge Animate create a jquery.min.1.7.1.js and i think in this javascript is the problem.
I hope anybody can help me.

THANKS

Is there a way to have the image as a link?

I've tried just having a link around an image to no avail, then tried to use the images title attribute again with no avail.

Hi, great library!
Just upgraded to 1.3.1. In previous versions (1.2.5 for example) it was possible to register multiple handlers on the same object (e.g. $document) to receive 1 and 2 finger gestures. Somewhere between 1.2.5 & 1.3.1 this seems to have been dropped, or am I missing something?

Thanks

I think it might be logical to add the demos from the site the the repo, something like a doc/ folder is a really good tradition, plus, having everything needed in one place is generally a better idea than keeping the code in git only and the docs and examples on the site only.

would save lots of time for the user.

NOT WORKING

When I'm using the {triggerOnTouchEnd : false}

and listening for the {phase:end}, I implement a 'transition-end' callback function.

when the 'transition-end' callback function is called which ever direction i' have swiped the direction

property it is always {direction:left}.

HOW EVER THIS WORKS

When I'm using the {triggerOnTouchEnd : true}

and listening for the {phase:end}, I implement a 'transition-end' callback function.

when the 'transition-end' callback function is called the direction property is correct.

I have an issue when you scroll down/up, when the scroll is not finished you swipe left/right. The second time in doesn't work anymore. Just check on http://preview.dev.concepts2go.com/mobile/new/index.html.

Tested with iphone4 + iphone5 on iOs6

The example here uses 1.2.5, but does not work with v1.2.6.
http://labs.skinkers.com/touchSwipe/demo/image_scroll.php

If you drag an image too far, the cancel event is triggered incorrectly. Reverting to 1.2.5 fixes the problem.

firstly nicly done, just 1 little thing

        val = val===true?true:false;

and
return $element.data(PLUGIN_NS+'_intouch') === true ? true : false;

are a bit painful to read because you checking if something is true just to set it to true else set it to false

        val = val===true;

and
return $element.data(PLUGIN_NS+'_intouch') === true;

the above does the same just without the pointless inline if

Just need a way to destroy and re-initialize the touchswipe plug-in

Due to the line of code:

excludedElements:"button, input, select, textarea, a, .noSwipe, "

touch is broken for previous clients that are not explicitly setting the "excludedElements" option, because the JQuery line that uses it and examines the "closest" element chokes. I believe (after testing and fixing mine) the choking is because of the dangling comma at the end of that string.

I fixed mine by explicitly setting the option to an empty string.

Hi, I'm trying to use touchSwipe for multiple swiping areas on a single page, but this does not seem possible.
Is this feature planned for future versions?

Hi Matt,

I'm trying to get on skinkers.com for documentation and demos. But unfortunatly the page seems down.

Maybe you can send me the docu because it's really urgent. We already use your plugin but I didn't impement it...

thanks for your help!

Hi,
i 'm unable to get the swipe event fired on images when they are wrap in a link tag....
Is there a way to workaround ?

thanks a lot

Simple problem, but seemingly difficult solution.

If I quickly perform my two finger swiping back and forth from left to right, the functions can't keep up as fast as if triggerOnTouchEnd was set to false.

So what ends up happening is that a function will get "queued" that didn't have a chance to fire before I started the next gesture. Then, upon the subsequent gesture, both the queued function and the currently called function fire at the same time.

Even if I perform my gestures at a much slower pace, eventually, the bug will occur. Two swipes with fire at the same time with one gesture.

Here is my code:

var swipeOptions = {
swipeLeft: swipeL,
swipeRight: swipeR,
swipeUp: swipeU,
swipeDown: swipeD,
threshold:25,
fingers:2
}

$(function() {
//Enable swiping...
$(document).swipe( swipeOptions );
});

function swipeL(e) {
e.stopPropagation();
$("#gestureArea").text("Left")
return false;
}
function swipeR(e) {
e.stopPropagation();
$("#gestureArea").text("Right")
return false;
}
function swipeU(e) {
e.stopPropagation();
$("#gestureArea").text("Up")
return false;
}
function swipeD(e) {
e.stopPropagation();
$("#gestureArea").text("Down")
return false;
}

Noticed when I switched from a less robust touch library to this one that it broke HTML5 video and audio touch event support for iOS devices when created via the mediaelement.js.

The play button overlay looks like this:

The actual play button on the lower left of the video that isn't clickable via iPad looks like this:

Hi!

It appears that it is not possible to allow scrolling both horizontally and vertically at once. This would let the user scroll as normally, and then trigger swipe events when the end of the page in the given direction is reached.

Is it possible to get in? Or is it even possible already? :)

Regards

event.preventDefault is causing an error in IE8. It's not my favorite browser, but I still have to support it. How about a workaround like here?

http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie

THANKS!

hey Ive got a problem, Im trying to use single swipe as a trigger to animate a div, if i declare :

$("#info1c").swipe({
swipeLeft:function(event, direction, distance, duration, fingerCount){
$('#block1').stop().animate({ top:'0', left: '-=2495px'},800);
},
threshold:0
});

it works, but if i declare afterwards:

$("#info1c").swipe({
swipeRight:function(event, direction, distance, duration, fingerCount){
$('#block1').stop().animate({ top:'0', left: '+=2495px'},800);
},
threshold:0
});

The div wont let me swipe right, how can i fix this?, i can only swipe to one direction in one specific div, Am i missing something in your plugin that i don't know? Could you tell what it is, and how it works?

Im kind of new to jQuery so i would appreciate you help thanks.

Hi not really a bug but i am really struggling to get this plugin to scroll for me vertically wondering if you could give me some advise had it working perfect for horizontal but vertical cant seem to get it to work .

here is where i am at.
http://jsfiddle.net/zZajW/6/

Thanks

The examples here:

http://labs.skinkers.com/touchSwipe/demo/advanced_1.php
http://labs.skinkers.com/touchSwipe/demo/advanced_2.php

don't appear to be working. Tested with Android 2.3.5 and 4.0.3, and desktop browsers.

Looks like stricter js engines are choking on the undefined variable 'str', instead of assuming to be a global.

Need a way to temporarily disable user interaction on an element that has multiple swipe events tied to it.

Hi - I'm trying to use TouchSwipe with JQuery Mobile transitions to allow users of touch screen devices to swipe from page to page.

Each page has a forward/backward link which when clicked applies the transition perfectly. I've then used a click event in the TouchSwipe swipe function so that left/right gestures activate the left/right links. While this works, the page swiped to (after the transition) is not swipeable. Refresh the page and it works fine (but I don't want users to have to refresh the page).

Any help/suggestions would be appreciated.

        $(document).ready(function(){
            //Enable swiping...
            $("#container").swipe( {
                //Generic swipe handler for all directions
                swipe:function(event, direction, distance, duration, fingerCount) {
                    if (direction=='right'){
                       $("#rightclicker").click();
                    }
                    if (direction=='left'){
                       $("#leftclicker").click();
                    }
                },
                threshold:0,
                fingers:'all'
            });
        });

Is there a way to handle this as far as binding the 2 events separately on the same element is not working ? thanks.

Right now if I bind one event with

$obj.swipe({swipe: myhandler1});

and then try to bind another with

$obj.swipe({swipe: myhandler2});

then only the second one gets called.

How can I allow the swipe target's text to be selectable? For example If someone want to select the text from a slide.

This is not a bug report or feature request, but more an appreciation for your work.

I made a gallery for jQuery Mobile that uses your touchswipe plugin.
You can view the code here: https://github.com/jerone/jQueryMobileSliderGallery

It should work in the same browsers as jQuery Mobile does, but it is tested on multiple mobile and modern desktop browsers.

Here is a use-case:

• user starts a swipe in direction A
• user decides to "abort" the swipe and changes direction to the opposite (the intuitive action)

This can happen for instance when flipping through pages and deciding to stay rather than continue.

Expected result:

• swipe gets canceled.

Actual result:

• with most people I tested this with, they go to the next page anyway, and get frustrated.

This does depend on distance between touchdown and liftoff points, in some cases it does get cancelled in others it continues anyway, there is also a 3'rd case but I'm neglecting it for now, but in most cases, as I mentioned, the swipe is not cancelled.

I think that this should be configurable via something like a bool swipeBackCancellesAction and the default being true.
Another way to go is to add something like int swipeBackThreshold, defining the minimum pixels for a swipe back to count.
In both cases, swiping past the touchdown point will effectively reset the direction.

It is more logical to consider a swipe successful iff both of the next conditions are met:

• we exceeded the distance threshold when we started the swipe
• we lifted off while moving in the same general direction as we started.

That last bit of the move counts the most, and to cancel out the noise it would be logical to also enforce a threshold, either the same as swipeStart in the earlier case (with swipeBackCancellesAction = true), or a seporate swipeBackThreshold in the later.

You left an alert in there.

first, thanks a very useful plug-in, and quite easy to use. I implemented it on a project, the links don't work if they're inside of the container that I bound the swipe method to. Since this plug-in using jQuery's bind method, and this particular method doesn't have event capturing.

Hey Matt, loving this script.
Best script so far that supported both mobile as desktop browsers.

It would be great if you could provide a minified version. For mobile this is very important.

Off course we could do that ourselves...

Keep up the great work.

Hiya. Didn't know where else to post this.
But i was having issues where the mouseup event wouldn't let go if i accidentally dragged my mouse outside of the element, in my case a Div.

So under "END_EV = useTouchEvents ? 'touchend' : 'mouseup',"
i added "OUT_EV = useTouchEvents ? 'touchend' : 'mouseleave',"

as well as $element.bind(OUT_EV, touchEnd); and $element.unbind(OUT_EV, touchEnd, false); in the appropriate places.

Works like a charm, treats mouseleave as phase end.

I'm sure other people will find this useful. So hopefully you can add this to the file.
Maybe even as an option variable.

Thanks.

Here is something I'd like to control, a usecase:

• tap/click a link and it behaves like a link
• touch and swipe a link and I get a swipe event instead of the link behavior

I do see a way around this -- I can register a touchSwipe click event on a non-excluded element, but this is less natural than just adding an A element, plus the approach will require allot of jumping through hoops to get dynamic content wired up and working correctly...

I'm thinking of something like a threshold (speed or distance) for specific elements, before you pass it, you get default behavior, go over, and it's a swipe... this will also make things like selecting text and focusing input elements more natural.

Note, this does not cancel out the need of completely excluded elements, so it's a slightly different category, not yet sure of a natural and simple way to deal with this, still thinking...

P.S. right now, for instance, if I remove A from excludedElements I get both a swipe and a link action and can't find a way to control this from the handlers...

Hi,
i'm using touchSwipe for a little WebApp with AJAX content.
Unfortunately, the plugin doesn't work on elements which were added dynamically via AJAX.

You can try it here (dirty example, but it makes my problem clear): http://jsfiddle.net/a7AMN/1/

Any advices? :)

Broken link on http://labs.skinkers.com/touchSwipe/

If the swipe plugin is in use the scroll bar cannot be clicked and moved on a desktop (non-touch control) screen. It is disabling the scrollbar in some way.

Hi, is not really a issues, but more a "how to"
I looking for a way to reproduce the same behavior than the ios facebook app with the sidebar panel.
SwipLeft and swipeRight work well,
but when i'm trying to get a 'manual' swipe (i update my element position x according to distance), i can move my element on the right event if my swipe is on left.
i try to fix it by regarding if my distance go throw 0, but without success...

Here is my code example

swipeSize = is my max swipe size.
This work well on right swipe.

$content.swipe({
swipeStatus:function(event, phase, direction, distance, duration ) {

            if(distance <= swipeSize && direction=='right') $content.css(transform,'translate3d('+ distance  +'px,0,0)')
            if(distance != 0 && direction=='left') $content.css(transform,'translate3d('+ distance  +'px,0,0)')


        }

    });

Hi Matt,

Thanks for this great plugin. It is very nice and easy to work now with swipe events.
Now I have small problem. I want to disable all swipe events on one element except swipe click.
Is there some easy way to do this ?

Thanks in advance
Vladimir

does not appear to work on jQuery1.7.2

I am currently trying to call a fingerCount to apply various events to the same object depending on the swiped fingerCount.

Here is what I am looking like thus far:

function right(event, fingerCount) {
alert(fingerCount);
}

var swipeOptions = {
swipe: right,
fingers: 'all'
};

$(function() {
$(".item").swipe(swipeOptions);
});

At this point it is calling the direction and not the fingerCount when ".itemname" is swiped.

The full idea behind this is that it will lead to calling "right" a variable with a function and a if/else statement within it that will change depending on the fingerCount.

Hi,

I made some changes. Take a look at: https://github.com/colorhat/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe-1.2.7.js

I tryed toe pul request on gitHub, but got an 500 error.

Can you check out my changes an give me a feedback on that?

Tobias

Hi I was wondering if anyone else had this issue where I am unable to focus in on an input element if within swipe area?

Hi,

Loving the plugin - seems to work on non-touch devices too, which is a bonus.

However, it seems that I can't zoom in / out of a page on the area where swipe events are being caught. Is this intentional?

I'm only using single-finger swipe, so would I be able to set the start of a double-finger event to disable touchswipe? Is there some other recommended way of achieving this?

Thanks
undecided

Hi,

I am a newbie and I am trying to use TouchSwipe with Angular.
In angular, I have directive - ng-swipe that listens to swipe events and I use the directive in my code as ng-swipe="callFun" as a div attribute.

Angular expects me to pass a function. But, the TouchSwipe is called as $("#test").swipe( {
swipe:function(event, direction, distance, duration, fingerCount) { //do something }, threshold:0
});

How can I handle this? Searched all over the net and couldnt find a solution. Any help would be great!

.Uday

hi ,
i am using touch swipe and imgscroll.js on one of my application for ipad for picture slideshow. i have a weird problem. all the images have same dimensions, they do scroll and shown well on ipad simulator how ever they do not on the ipad device.
do you have any idea??
thanks,

Hi there,

I'm using TouchSwipe on this development site- click here to see which was working great under iOS 5 and mobile safari.

use iOS 6 safari and chrome to view issue

After my weekend update to iOS 6, it seems jQuery deactivates the site after vertical scrolling a bit (normal browser scrolling, not jQuery). After browser scrolling Touch swipe no longer functions properly nor do page anchors (main menu) at the top.

I'm using version 1.2.5 - This is confirmed to work on iOS 5 devices, however iOS (iPhone & iPads) seem to deactivate the site after some vertical scrolling.

Hi,

i have applied the swipe function to an entire page (jquery mobile page)

Swipe is working, but as a side effect on Ios5 a long delay appears on navigation bar buttons.

Click is not firing immediately, but you have to tap a button for 2 seconds.

It's working ok on Android.
I'm using jquery 1.8.1 and jquery mobile 1.2

Es.

html role page:

If I trace out the event object from the handler, I only ever get a touch end event. It would be good to have all of the events so that I could use the plugin as a sort-of touch delegator.