iOS hold and delete icons using HTML5

This is a way to mimic the iOS hold and deleting apps from the menu grid screen. In this case, it only shakes one of the icons when held-touched, but this can easily be mutuable to act exactly the same as the iOS scenario.

It also adds the img tag under the setTimeout method to provide the close button.

Used the willhelm-murdoch’s jQuery-Wiggle


function wiggle() {
    var timer;
    $('a.icon').bind('touchstart', function(e) {
        e.preventDefault();
        clearTimeout(this.timer);
        var p = $(this).parent(); // The container div
        this.timer = setTimeout(function(p) {
            p.prepend( img onclick="top.blockclose(this)" );
            p.wiggle('start');
        }, 1000, p);
    })
    .mouseup(function(e) {
        clearTimeout(this.timer);
    });
    
    $('#bodywrap').click(function(e) {
        $('.wiggling')).wiggle('stop');
    });
}
 
5
Kudos
 
5
Kudos

Now read this

Understanding “this”

You often hear it down the hall or across the room. “JavaScript sucks, I don’t understand why I can’t reference my object”. The use of “this” in JavaScript is notorious for confusing JavaScript developers. We are assuming here that... Continue →