jQuery Mobile Swipe Listview

Swipe sideways on a listview element to reveal additional buttons (iOS style)


Demo (Mobile Only)

16 thoughts on “jQuery Mobile Swipe Listview

  1. mobile_dev Reply


    Thanks for your swipe to delete functionality, does this works on jQM version 1.3.2? I didn’t read your code yet, just tried directly in my code which doesn’t seem to work, please tell me if I have to make some changes. Also can you please add an edit on top left like in iOS 7 style?

    Thanks again!

    • Kevin Sloan Post authorReply

      You’re going to have to give me more context, I’ve tried it on Android and it works fine for me, can you post you’re code somewhere and link me to it?

  2. ramesh Reply

    hi, your code was really useful , can u tell me how to slide back smoothly if i want to again hide the delete button ?? now its going very quick , can u please tell me after which call back should i add it ? it would be helpful if u give the sample code …. and some comments in-between code on how it works . Thank you . expecting reply from u ASAP

      • ramesh Reply

        actually i am very new to this jquery mobile and phonegap world. so having difficulties understanding the events like touch , tap , touchmove etc … ur help is needed for me

        e.currentTarget.style.left = new_left

        i think u are telling about this line … but i don understand what function this does…
        can u just paste me the code for sliding back to same state if some other li is swiped or outside of it is clicked , i also want to have one more swiping left to have function like save the li if i like it , but using ur code , i am not able to save the li to right , i tried changing values but didn’t work.

  3. ramesh Reply

    kevin thank you for your help , it worked well …. i have one more issue developing my app… i have tried every thing , …. when i scroll my app down the header is dragged or pulled down…. i mean its over scrolling ….. i have tried every thing .. like , then changing the overflowscroll in config and uibounce false etc …. even i tried nonbounce.js , but if i use nonbounce.js the whole screen stops scrolling…. can u help me solve this scrolling problem ??

    • Kevin Sloan Post authorReply

      This is phonegap related, and unrelated to this post, but just add <preference name="DisallowOverscroll" value="true" /> to your config.xml

      • ramesh Reply

        i tried to animate ur swipe code but its not working , my client expects exactly like ios-mail view , when dragged more ….. it should snap back gently ….. i am stuck here …. actually they are saying use some transition but i don know how , could you please help me with this ?? i am nearing my app completion but these things are returned after review

        • Kevin Sloan Post authorReply

          You’re going to want to pass an easing function into the jQuery animate method. Honestly, just read the documentation.


          You’re not doing yourself any favours by asking me every little question.
          Look for the easing option and read about it… it’s not hard at all.

          • ramesh

            I have almost completed , but i am having problems with ui. the listview is moving little to left and coming back creating a shaky vew , when i perform a vertical scroll using iscroll.js . i think since the swipe to delete is in touchstart i think i am having this problem, any other good idea u have ??

  4. liyana Reply

    why isnt this code only works on the index.html page on phonegap? i tried to put it in the other page,it wont work.. my project due date is in 2 days time i hope you’d willing to help, thank yooou!! but the code is great btw thanks

  5. Aravind Reply

    Hi Kevin,

    I tried on desktop chrome browser in responsive mode your example is working fine. but i done same procedure for my project it is not working for me can you help me please asap.

Leave a Reply

Your email address will not be published. Required fields are marked *