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

Using URL.createObjectURL()

This is a blog post about using the Web API URL.createObjectURL(). Here we will go through the use cases as well as the inner intricacies of what this Web API does. First up lets see how to use the API. URL.createObjectURL() # Syntax... Continue →