Skip to navigation
2012 Feb 1

Wobbly: iOS Style Wobbling Element Deletion for jQuery

When the iPhone first got the app store back in 2008, one of the most polished features was how the user would interact with the icons for apps that they downloaded. Pressing and holding on an icon would make it “wobble”, indicating that you could either move it or delete it. For applications written in Objective-C, this has been re-created over and over again. On the web though, it’s slightly more complicated. Back in 2008 the technology to create smooth wobbly elements wasn’t mature enough for the mainstream. Luckily for us, that has changed in the last year.

wobbly mimics iOS delete actions

Enter: Wobbly

In an effort to promote re-usability and consistency across our PhoneGap apps, we created the Wobbly jQuery Plugin. This plugin allows you to make any element that you choose wobble like the icons on the iOS homescreen. When you click the “x” in the corner, the element fades out of existence and then triggers a callback function where your application logic can go.

To use it, all you need to is call “.wobbly(“start”)” on your jQuery wrapper set.

$(".myItems").wobbly("start");

To stop the wobble, just called “.wobbly(“stop”)” on your jQuery wrapper set.

$(".myItems").wobbly("stop");

Wobbly also allows you specify the size of the X, it’s color, the circle background color, the circle border, the circle orientation (left,right), and a callback function that gets executed when an item is deleted.

$(".myItems").wobbly("start", {
	size : .50,
	position: "left",
	callback : function() {
		alert("In callback after item is removed from the DOM.");
	}
});

A list of all the available options and their defaults:

borderColor : "black"
backgroundColor : "-webkit-linear-gradient(top, #e20000 0%,#b70000 100%)"
textColor : "white"
size : 1
position : "left"  //or "right".
callback : function() {}

To get started using Wobbly, follow the links below.

GitHub Repo: https://github.com/ddmnet/Wobbly
Full Example: http://ddmnet.github.com/Wobbly/

Designed and created by DDM Marketing & Communications.