Helping ordinary people create extraordinary websites!

Creating the iPhone Unlock Screen in xHTML, CSS and jQuery

By Marco Kuiper
2009-11-12

The iPhone unlock screen in xHTML, CSS and jQuery

The iPhone: Everybody knows what it is, many people "played around" with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we're used from Apple).

I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for web browsers. Today, I'm going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.



The iPhone unlock screen in xHTML, CSS and jQuery

OK, maybe not fully the "feeling" (look and feel) from the iPhone, since I can't make any webbrowser react to placing your finger on the screen, but your mouse will do the trick.

Features:

  • XHTML and CSS valid.
  • "Timer" displays the current time (Just like the iPhone).
  • "Date" displays the current date (Just like the iPhone).
  • Pretty sleek interface, including see-through elements (Just like the iPhone).
  • Changeable background.
  • Tested and working on Firefox 3, Internet Explorer 7 and Safari 3.

Known issues

  • The "slider" doesn't slide back (what the iPhone does).
  • The "unlock animation" isn't exactly the same as the iPhone.
  • Doesn't work on an actual iPhone.

Other than those minor issues, it works as expected. Want to know how I created it? Check it out.

Resources

Before I started, I needed some reference material to work with.

  • For the beautiful background image, I took a wallpaper from SocWall.
  • For the high resolution iPhone layout, Teehan+lax helpt me out.
  • I wanted to use the Slider component from jQuery UI.
  • I wanted to use jQuery for the functionality. The last version (v. 1.3.0) isn't compatible (yet) with the slider component, and therefor I'm using v. 1.2.6.
  • Using the jQuery slider component was pretty hard, Ryan helped me out a lot here.
  • To display the current date and time with JavaScript, I used WebDevelopersNotes as a resource.

With all resources set, on to the next step.





Tutorial pages:
 2 Votes

You might also want to check these out:


Leave a Comment on "Creating the iPhone Unlock Screen in xHTML, CSS and jQuery"
You must be logged in to post a comment.

Link to This Tutorial Page!
GET OUR NEWSLETTERS