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

Web Workers 101

Do you want to know the basic “todo mvc” of the Web Workers API? This is not the end all of what there is to know about Web Workers, but rather this a good first guide to exploring the topic. The posts on MDN would be a great resource... Continue →