Home

Follow Skinkers.

 

Blog.

75

Skinkers release TouchSwipe jQuery plugin for iPad, iPhone and Android.

  February 11th, 2011 | Android, Apple, iOS, iPad, iPhone, JavaScript, jQuery | Matt Bryson

Skinkers’ TouchSwipe jQuery plugin enables the detection of swipe gestures on touch based devices.

Features

  • Detects swipes in 4 directions, “up”, “down”, “left” and “right”
  • Supports single finger or double finger touch events
  • Supports click as well as swipe
  • Definable threshold to determin when a gesture is actually a swipe
  • Events triggered for swipe “start”,”move”,”end” and “cancel”
  • End event can be triggered either on touch release, or as soon as threshold is met
  • Allows swiping and page scrolling

Download the plugin at :
http://plugins.jquery.com/project/touchSwipe

Demos and docs at:
http://labs.skinkers.com/touchSwipe/

75 Responses to “Skinkers release TouchSwipe jQuery plugin for iPad, iPhone and Android.”

  1. Tina says:

    Hi,

    first of all: great plugin, I really like it!

    I’m using the imageGallery and I got a problem that is a bit tricky. I hope someone can give me a hint. I also noticed that images are flickering while swiping. Like mentioned above I added the following line in the initial CSS:
    -webkit-transform: translate3d(0px,0px,0px);

    The flickering stopped but I got a new problem. I’d like to use the iCab browser in fullscreen. But everytime I want to switch to the fullscreen mode now the browser crashes. In window mode everything works fine. Does anybody have an idea how to solve this?
    By the way, my HTML-structure is different than that one in the demo. I had to assign the translate3d to a span-Element that surrounds each of my images and not the outer div-container to solve the flickering problem. Don’t know if that might be important…

    Cheers
    Tina

  2. Matt Bryson says:

    Hi Tina,

    Iv’e not had much experience with the iCab browser, but apparently it is prone to crashing when multiple tabs are open. Could this be the case?

    How many images are you loading? Remember that most mobile devices are pretty low specced, and loading up lots of large images at once can quickly cause out of memory errors, which if not handled correctly by an application can cause un expected crashing / closures.

    The gallery demo is just a simple example, if you have a lot of images to show you ,might want to employ some lazy loading to try to reduce the initial memory footprint. However, memory management in JavaScript is a bit of a myth!

    cheers

    Matt.

  3. Owen says:

    Has anyone tried to use a form input field inside an animated TouchSwipe element like the photo gallery. Mine does do not trigger the text pop up on mobile devices. Any ideas?

  4. optimus says:

    Hi,
    Tried using your plugin seeing the demo in the following manner, whenever i swipe the column in android phone (2.2.1) or iPad the alert displayed only shows distance and direction as null….i use jQuery 1.6.2 with jQueryUI…please let me know if i got something wrong here,…..

    var swipeOptions=
    {
    swipeStatus:swipeStatus,
    threshold:20
    }
    $(function()
    {
    //Enable swiping…
    $(“.colContent”).swipe( swipeOptions );
    });
    function swipeStatus(event, phase, direction, distance)
    {
    alert(“The direction is ” + direction + “and distance is ” + distance);
    }

  5. Duncan says:

    Hi,

    Great plugin, been having fun playing around with it. One challenge that’s beaten me is to try and make an infinite scroller out of it. Ive put a bunch of divs inside the wrapper and tried all sorts of cloning and moving divs from start to end after a swipe but not quite cracked it.

    Have you got any plans to allow infinite scrolling or could you give any pointers as to how it might be achieved. If not ill battle on anyway :-)

  6. Kundan says:

    Hi,
    I am using ur swipe library.
    it works great on android webkit browser.
    But it stops browser default behavior

    eg. select box doesn’t work if use image gallery.
    Do u have any solution to work both(gallery and select box) on android webkit browser

  7. Erick says:

    Love the plugin, but…

    Fingers should have more options. 0 = any number of fingers, 1 = 1 finger, 2 = 2 fingers, and so on.

    The callback for a swipe should then tell the number of fingers used.

    Do that and you got the best. :-)

  8. Owen says:

    Hey Matt,

    Have you thought about or heard of anyone integrating touchswipe with jqtouch?

  9. Jeremy Bradshaw says:

    Any idea where to download the source while the jquery plugins site is under development?

  10. Matt Bryson says:

    Hi Jeremy,

    There is the git hub version : https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

    Regards

    Matt.

  11. Thanks for this plugin!

    I was trying to get the image gallery example to show images up and down instead of left to right when swiping. Is there an easy way to do this?

    Changing the direction variables to up and down still scrolls the image left and right.

  12. Matt Bryson says:

    Im trying to get a list together of sites / apps that use the TouchSwipe plugin for a showcase, if anyone knows of any, and wants a mention, please let me know!

    cheers

    m.

  13. CHris says:

    I would like to have some quick tutorials on using Touchswipe. I am new to implimenting it all and would greatly a enjoy a step by step or the best by far would be a quick video tutorial.

    Thanks,
    Chris

  14. Matt Bryson says:

    There is the demo site, showing how to use each feature, where you can simply view the source.

    I can add some code examples to the demos as well if that would help.

    labs.skinkers.com/content/touchSwipe/demo

    .m

  15. CHris says:

    Here is something simple I am learning and testing out. Feel free to change and mess around with it.

    http://jsfiddle.net/someyoungideas/8zFQd/

    Thanks,
    Chris

  16. Matt Bryson says:

    Hi Chris,

    You didn’t have the touch swipe library added properly (you had the github site added, rather than the actual js file).

    Ive added the latest js from git hub, and made a couple fo tweaks and its working.

    m.

  17. CHris says:

    Thanks a million Matt. Sorry for the delayed response. I stumbled upon this blog page the first time and couldn’t find my way back to it. It is working great now! I have been using this plugin alot and have been doing lots of various things with it, and thoroughly enjoy it. I have another question of course.

    My next question is if it is possible to apply multiple touch gesture arguments to a single item. For example applying a function with a single swipe to an item, along with a function for a double swipe on the same item. If you would like I can get this set up as well on a jsfiddle. If there is an alternate method of discussing that would be fine as well.

    Thanks again!

  18. CHris says:

    Here is the jsfiddle that I set up to show what I am being prevented from doing.

    http://jsfiddle.net/someyoungideas/8zFQd/3/

    Thanks again

  19. Matt Bryson says:

    Hi Chris,

    The jsFiddle still had an invalid link to the library, which wouldn’t help!

    You cant add the plugin twice to the same DOM element, so to detect different finger swipes, you can use fingers=’all’ for the finger count, which detects any number of fingers. You can then check the finge count in the event handler.

    I have updated your jsFiddle :http://jsfiddle.net/8zFQd/6/
    But you can also see an example here : http://labs.skinkers.com/content/touchSwipe/demo/3-1_Any_finger_swipe.php

    Note that on a non touch device, it will report 0 fingers.

    Cheers

    m.

  20. dennis says:

    Skinkers,

    Great plugin, for sure. Unfortunately, doing a swipe on an Android goes well. On an iPhone though, the actual div jumps back to its original position. Is there any obvious solution to this ?

    Another question..:

    why god, why ?

  21. Matt Bryson says:

    Hi Dennis,

    Without seeing any code, I cant really help. It depends how you are moving your divs etc. We have implemented swiping divs that works on both devies, (see the last demo example gallery), so its proabably something to do with the implementation.

    m.

  22. Michael says:

    Is this compatible with iOS 6? I recently upgrades and started seeing some inconsistent actions. Has there been any other reports of problems with iOS 6?

  23. Hello there, just became aware of your blog through Google, and found that it’s truly informative. I’m going to watch out for brussels.
    I’ll appreciate if you continue this in future. Many people will be benefited from your writing. Cheers!

  24. Matt Bryson says:

    There are some issues with IOS 6 and how it handles timeouts, but there is fix as mentioned on the git hub repo:
    https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/30#issuecomment-9140015

Leave a Reply

*