andyMatthews.net

can you link to a quicky jing so we can see it in action? :)

doug boude - February 20, 2012 07:41 am

Hey Andy I modified your from a while back to accept swipe to toggle the button display. The swipe left / right to hide / show caused usability issues when I tested on a device and an actual user.

Sidney - February 20, 2012 11:04 am

Thanks Andy, and I love to see a big coders smile under a brilliant genius's beard, who coded this with love and shares it all with us ... Hip hip hooray... Thanks again my friend! Take care and Namasté

André - February 29, 2012 10:31 am

Andy - know what I would like to see? The little red circle icon on the left like most iOS apps have, and you tap it, it rotates 90 degree counter clockwise, then the delete button appears.

Rob - March 01, 2012 05:53 pm

thanx very much!!!!!!

Nils - March 05, 2012 02:28 pm

That's really cool thanks. Though the css does change the value to the default css for all buttons in lists. To avoid that problem I just added "#swipeMe" before each attributes in your css so that it would stick to the elements inside my list with id="swipeMe" Cheers !

Jojo - March 07, 2012 08:23 am

I agree with Rob, Some functionality like that would be cool. I also wonder if it would be possible to trigger all items in the view to show the delete button. E.g. using an iOS like edit button in the header triggering this.

Marcel Overdijk - March 10, 2012 01:27 pm

Thanks for the nice plugin!! I just have a little problem, the button works well (it appears and I can delete) but even if i click anywhere, the button won't disapper (unless I swipe another one)... can you help me with this please?

Marc - March 24, 2012 12:11 pm

Hi Andy, great plugin.
I only have a problem with deleting the row. It visually removes itself from the list, but I can't actually delete the row from the database.

I pass to ass the data-swipeurl="handler_clients.php?command=deleteClient&client_id='.$row['id'].'"

unfortunately nothing happens. It seems as clicking the delete button does not make any href call...

can you help me figuring out what I'm doing wrong?

Nick - April 12, 2012 10:37 am

Thanks Andy,

What about "Twitter for iPhone Style Swipe Menu" is there a new version that works with the latest jquery mobile versions.

Thanks again.

Hady - April 18, 2012 03:40 am

Andy,

When I swipe the list item, the button displays "De" instead of "Delete". When I inspect the DOM and change any of its attributes or click it then it shows button text as "Delete". Weird. Any clues?

Thanks a lot!

Ecil Teodoro - May 10, 2012 11:16 pm

I was having problems getting the URL for the action to be set in JS, kept showing up as undefined... so I just did

var url = $(this).parents('li').data("swipeurl");

instead of

var url = $(e.target).attr('href');

Chad - May 12, 2012 05:34 pm

How do I attach the plugin to a dynamically generated element?

I have a static UL but the actual LI are generated via ajax.

I tried adding it after the ajax call has returned all the data, and after the listview('refresh'), but no joy :(

Thanks.

Mark - May 14, 2012 02:36 pm

With a <li> that contains an <a> I cannot seem to get the Delete button to activate.

Am I missing something?

Reid - May 16, 2012 07:43 am

First, good job Andy.
I implemented your code and work fine.
But i have problems to updating database when the delete button is pressed.
Im looking for the best way to do de database update, the problem not is the sql, the problem is which button is pressed and the event to trigger it.
Sorry for my bad english. Thank you.

Fer - May 23, 2012 04:40 am

This is a really cool plugin but I found it confusing to use because the swipe button action shows when swiping from right-to-left in Mail app and Notes App

A quick change on line 62 in jquery.swipeButton.js fixes this:
direction: 'swiperight',

to

direction: 'swipeleft',

Sze - June 12, 2012 11:20 am

hahahhahaa

anil - June 13, 2012 04:15 am

Hi Andy

I am not sure if your example for the following actually works

var url = $(e.target).attr('href');

It always return null after the Delete button was pressed.

I changed it to

var url = $(this).attr('href');

to make it works.

I may be wrong though:) Please review

Brian - June 25, 2012 02:54 am

Hi Andy,

I'm facing the same problem with Mark, though in my context, I am dynamically adding static contents to the LI using JQuery (e.g. clicking on a button will add new LI with fixed text, for testing purposes). Hope this will help you come out with a 'simpler' demo page to use as a basis instead of coming out with the AJAX one.

Thanks.

Ken - July 02, 2012 02:20 am

Hi Andy,
After two days of trying to figure out what I am doing wrong I am asking for help. .post is not working for me because url is undefined. I'm just trying to run the database script that will actually delete ( in my case complete) the task the li item represents.

• 
  
  I have the tests working correctly, but I don't know how to verify that the test executes the post properly.
  
  I'm very excited about the plugin. Thanks!

  Rob Gore - July 16, 2012 11:13 pm

Hi Andy! Update on my progress:
I now have swipe events emulating on my desktop chrome, and I am reading the console log events just fine.
Answers to your questions:
1) when I view the source code I see

2) The delete button slides out correctly

3) Here are the contents of the console log:
undefined
Delete

Rob Gore - July 17, 2012 04:59 pm

Hi Andy! Perhaps a screenshot of the console log and DOM might help.

Screenshot1

Screenshot2
I should be able to get this on my own. I'm still trying. Rob

Rob Gore - July 17, 2012 08:22 pm

var url = $(e.currentTarget).attr('href');

e.currentTarget worked for me instead of e.target

Rob Gore - July 19, 2012 03:35 pm

Hi Andy!

Great post! This was exactly what I was looking for. I just have 1 problem. It seems that with predefined listviews, the plugin works perfectly. However, when I try and swipe on a dynamically loaded listview from an ajax call, nothing will work. I noticed that this happens with both your plugin and the default jquery swipe functions. Any ideas on how to solve this?

Thanks!

Mike Klein - July 23, 2012 05:48 pm

Hi Andy!

I tried again for a day and it was just like you said. I was calling the plugin in the wrong area. Instead of just putting the event handler anywhere in the html file, I initialized it at the end of my ajax call. For anyone else having trouble, I wrote up a quick sample.

Thanks again Andy!




function loadlist() {
var posts ='

'+"Dynamic Element"+'

';

$("#swipeMe").append(posts).trigger('create');

setTimeout(function () {
$('#swipeMe').listview('refresh');
$('#swipeMe').controlgroup('refresh');

}, 100);
$(document).ready(function() {

// attach the plugin to an element
$('#swipeMe li').swipeDelete({
btnTheme: 'e',
btnLabel: 'Delete',
btnClass: 'aSwipeButton',
click: function(e){
e.preventDefault();
var url = $(e.target).attr('href');
$(this).parents('li').slideUp();
$.post(url, function(data) {
console.log(data);
});
}
});

});


return false;

}

Mike Klein - July 25, 2012 09:02 pm

How would one set the theme ?

jpno5 - August 11, 2012 03:39 pm

hi andy
now i have a problem is that when a dynamic add a item to listview ,but the added items which i add before can't delete though it can display,and it will quicklu disapear.
please help me .tks

eleven - September 11, 2012 02:33 am

Hi Andy,

thanks for the nice pluggin that you have implemented.
I have also tried to integrate it with my mobile site and I have noticed a strange behaviour.
First I thought it is because of my site but then I could reproduce it also on your demo site.
Could you please check what is happening.
I have just "swiped" on different list items and first it worked fine, and delete button did not disapeared from the previous selected list item and in the new selected item I can see a small yellow line like in the attached screeshot.
Do you have an ideea why this happens?

Thank you and best regards,
Ramona.

Ramona - November 09, 2012 06:16 am

Hi there, awesome plugin. I'm fairly new to javascript/jQuery - how would I attached this to li's created and appended after a jquery mobile pageshow event?

Thank in advance

James - November 14, 2012 04:51 am

Hi, still struggling, with the help of stack overflow I've managed to get the correct code for doing this (see above question) but I cant seem to get it to work. I've even tried adding a button for desktop testing like in your demo with no success. I suspect this is down to me using a phonegap/jqm boilerplate (https://github.com/sebbie1o1/cordova-jquerymobile-boilerplate). Would it be possible to share some code with you to take a look? Thanks in advance.

James - November 14, 2012 08:32 am

Thanks for the plugin, BTW.

I have been trying to get it to work with my app but it doesn't seem to work. After examining the code you are filtering for "data-swipeurl" but dynamically added ul listviews do not seem to get that "data-swipeurl" on lis.

Not sure I see where the "data-swipeurl" is being placed on the li
so for my purposes I added $(this).attr("data-swipeurl",""); at the beginning of the declaration of the swipeDelete function in your js.

Joseph Baker - December 11, 2012 01:16 pm

Me again! ha! I found another small issue. My li are the thumbnail li that jquery mobile defines, so they button on the li came up but it was not centered vertically. I added a little to your css after "li[data-swipeurl] .aSwipeBtn":

li[data-swipeurl].ui-li-has-thumb .aSwipeBtn{
margin-top: 22px !important;
}

so if the li has a class of "ul-li-has-thumb" margin-top will be overwritten to accommodation for the extra height of the thumbnail li.

Joseph aker - December 11, 2012 01:41 pm

Hit enter before i could type in my email on that last comment sry...

Joseph Baker - December 11, 2012 01:43 pm

I committed the 2 changes that I spoke of before as requested. I believe that will do the trick. Let me know how it goes.

Joseph Baker - December 14, 2012 11:21 pm

Hi Andy

Many thanks for the plugin - it works a treat.
I've made a small tweak to the css in my implementation that you may be interested in.

li[data-swipeurl] .aSwipeBtn span.ui-btn-inner {
text-overflow: clip;
}

This just stops the momentary display of the elipses in the button text as the button slides into view.

All the best
Brian

Brian Samson - December 23, 2012 12:50 am

Brian...this sounds like something that could improve the project for everyone. Would you be interested in submitting this change to the project repo on Github?

andy matthews - December 28, 2012 10:01 pm

Hi Andy,

Sure, happy to - I've forked and sent you a pull request

atb
Brian

Brian Samson - December 29, 2012 02:03 am

Hi

Did you ever release a plugin for the swipe menu? or update against latest jquery versions?

Jasn - April 28, 2013 07:08 am

Jasn, I sure did:

https://github.com/commadelimited/jquery.swipeButton.js

andy matthews - May 03, 2013 11:23 am