HTML and CSS lock screen for mobile web application

Question

I'm building a single page, offline html5 web application using jquery mobile, backbone, underscore and tbd templating engine.

I'd like to create a lockscreen that looks similar to the native iPhone lockscreen. Before I go reinvent the wheel has anyone seen anything like this before? I haven't been able to find an example of this.

Thanks!

Quintero

Are you looking to implement an unlock slider? This has been done before: davidbcalhoun.com/2011/… – Ewald

I'm looking for an example implementation of the screen that appears after the unlock slider- the "enter passcode" screen – Quintero

tongue in cheek sarcasm In other words, looking for something that in no way will be used to circumvent security and be used for phishing attacks. – Palladium

this is for a LOB app, the view will be branded. The intent is to streamline the process of entering user credentials. I doesn't make sense to force the users to type their full user id and password each time they access the mobile app- especially since the mobile app doesn't expose the same level of sensitive data thats exposed in the mainline app. – Quintero

@Matt: "Surprisingly, the only mobile OS to implement this input type seems to be BlackBerry OS 6." – Bandaranaike

@Matt -- jsfiddle.net/maniator/xpmRW :-D – Lithosphere

Note that input type="range" now works in iOS 5 :) – Mound

Checkout this awesome ipad in html5/css3/jquery alexw.me/ipad2 Try looking around in it maybe you'll get what you want ... – Willable

Answer 1

Edit: Oh no, it's an old question!

Add a fixed-position, hidden div to your page. When you need to activate the lock screen, use jQuery to programmatically show it:

CSS

div#lockscreen {
    width: 0;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

jQuery

$(document).ready(function() {
    //hypothetical activation control
    $("#lock").click(function() {
        $("#lockscreen").css("width", "100%");
        $("#lockscreen").css("height", "100%");
        $("#lockscreen").css("z-index", "1000");
        //or dynamically generate z-index value
        $("#lockscreen").fadeIn();
    });
});

Halliehallman

Update - don't use jQuery.prototype.fadeIn. This executes on JavaScript's event loop and can perform poorly on constrained environments. Use CSS transitions if possible, as they are optimised and accelerated. – Halliehallman

Answer 2

Well it's been dredged up now, so I might aswell add this. Use <input type="text" pattern="[0-9]*" /> on a text field to get a numeric input. Not quite the same, but easier than using a full keyboard, and easier than coding the whole keypad yourself.

Asberry

Reference: developer.apple.com/library/safari/#codinghowtos/Mobile/… – Asberry