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!

Are you looking to implement an unlock slider? This has been done before: http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range — Matthew, Aug 15 '11 at 10:50
I'm looking for an example implementation of the screen that appears after the unlock slider- the "enter passcode" screen — Jeremy Danyow, Aug 15 '11 at 12:13
*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. — Jon Adams, Aug 15 '11 at 13:29
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. — Jeremy Danyow, Aug 15 '11 at 19:02
@Matt: "Surprisingly, the only mobile OS to implement this input type seems to be BlackBerry OS 6." — citizen conn, Aug 15 '11 at 21:46
Checkout this awesome ipad in html5/css3/jquery http://alexw.me/ipad2/ Try looking around in it maybe you'll get what you want ... — HamZa, May 21 '12 at 19:19

James Wright · Accepted Answer · 2015-08-31T17:13:55.693

4

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();
    });
});

edited Aug 31 '15 at 17:13

answered May 25 '12 at 13:14

James Wright

3,000
1
18
27

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. – James Wright Aug 31 '15 at 17:13

score 0 · Answer 2 · answered May 25 '12 at 14:40

0

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.

answered May 25 '12 at 14:40

Grezzo

2,220
2
22
39

Reference: https://developer.apple.com/library/safari/#codinghowtos/Mobile/UserExperience/_index.html – Grezzo May 25 '12 at 14:42

HTML and CSS lock screen for mobile web application

2 Answers2