Creating the iPhone unlock screen using xHTML, CSS and jQuery

Placed in: Home

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 webbrowsers. 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.

Demo The iPhone unlock screen in xHTML, CSS and jQuery

Download The iPhone unlock screen in xHTML, CSS and jQuery

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. I'm planning to make some more of these "iPhone style" webpages, so subscribe to the feed if you want to keep updated. 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.

xHTML

When you look in the source of the page, you'll see that the xHTML used isn't very complex.

 
<div id="iphone-scrollcontainer">
   <div id="iphone-inside">
      <div id="unlock-top">
         <p id="timepicker" class="time">08:23</p>
         <p id="datepicker" class="date">Wednesday, July 6</p>
      </div>
      <div id="unlock-spacer">
         &nbsp;
      </div>
      <div id="unlock-bottom">
         <div id="unlock-slider-wrapper">
            <div id="unlock-slider">
               <div id="unlock-handle"></div>
            </div>
         </div>
       </div>
    </div>
</div>

#iphone-scrollcontainer will be the overall container that holds all other elements.
#iphone-inside will have the same width & height as the container, but will be used to place the background image that'll fade out.
#unlock-top is used for the top of the unlock screen, holding the time and date.
#timepicker & &datepicker; will be used to change into the current time and date.
#unlock-spacer is needed to push the bottom down.
#unlock-bottom is the place for the bottom.
#unlock-slider-wrapper is the container for the slider.
#unlock-slider is the place where the handle can slide, used by the jQuery slider.
#unlock-handle needed by the jQuery slider component: The actual handle for the slider.

CSS

Now for the CSS part. We're going to use absolute positioning for this since the iPhone container will not resize. I'm only going to explain some things (not all) of the CSS file.

 
#iphone-scrollcontainer {
   height:461px;
   width:320px;
   position:absolute;
   top:140px;
   left:40px;
   background-color:#000000;
}
 
#iphone-inside {
   height:100%;
   width:100%;
   background-image:url(../images/background.png);
}
 
#unlock-spacer {
   height:272px;
}

#iphone-scrollcontainer has a size of 461 by 320 px. It is asbsolute positioned from the top left corner of the page, moved 140px down and 40 px to the right. The container has a black (#000000) background color.
#iphone-inside holds the backround image (background.png). The reason why this isn't placed in the scollcontainer, is because the inside will be faded out by jQuery and the black background from the scrollcontainer will remain.
#unlock-spacer has a height of 272px, because the total height is 461px. From this total height, the top (95px) and the bottom (94px) needs to be substracted, leaving 272px for the spacer.

JavaScript

At this point, we already have a pretty nice interface. For some interaction, we'll need to add some JavaScript. Like I said, I used the 1.2.6 version of jQuery to stay compatible with the Slider component. After including jquery-1.2.6.min.js, ui.core-1.5.3.js and ui.slider.js I created a new file called iphone-unlock.js with the following (Not the complete code):

 
$(document).ready(function()
{
   // Set the slider to be sliding
   $("#unlock-slider").slider({
   handle: "#unlock-handle",
   animate:true,
   stop: function(e,ui)
   {
      if($("#unlock-handle").position().left == 205)
      {
         unlock();
      }
      else
      {
         // Should slide back, but can't create it
         // Reason: When calling "$("#unlock-slider").slider("moveTo", 0);"
         // a loop is created, causing to crash the page
      }
   }});
   
   var unlock = function()
   {
      $("#unlock-bottom").fadeOut("normal", function(){
         $("#unlock-top").slideUp("fast", function(){
            $("#iphone-inside").fadeOut("slow", function(){
               window.location="index.html";  
        });  
      });                  
    });
  }
});

handle: tells the Slider component that the node is used as the handle.
animate: is set to true so when users click in the slider, it'll smootly animate to that position.
stop: is the function that's called when the slider stops. At that point, the slider checks if it's on his end (205px from the left). If so, it unlocks. If not, ht should slide back, but I can't create this effect (See the comments). If anyone knows a work-around for this, please let me know.
unlock function first fadeOuts the bottom, afster that it slides up the top and last it fades out the background image. Than it re-directs to another page, but in this case it's the same page.

All other code should be self-explanatory.

Conclusion and Download

Looking back, I think this is one pretty cool way of using the jQuery framework. With the sleek interface of the iPhone, what's not to like? Although not exactly everything is the same as the gadget, it still manages to get the iPhone feeling in your webbrowser.

That's it! Hoped you learned something new today and start loving the jQuery framework (like I do). Be prepared to expect more jQuery / CSS / xHTML iPhone UI articles in the future.

Update

Martin provided a fix for the "not sliding back". He also made some adjustments to the code to make it look more like an actual iPhone, like the glowing slider and the same effect.

Thanks! I've updated the demo page and download package.

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Garrett W.

2009-01-17 11:17:05

found another issue or two. if you click at the right-most spot on the bar, the slider moves there but does not activate the unlock like it should.
but more importantly, i suppose: the real iphone does not slide to whatever position you click. but i'm sure you knew that.
i don't know any jQuery, but i'm wondering if it provides all that you'd need to recreate the slider perfectly. for example, some simple mouseup and mousedown triggers would be useful, in the case that either (1) you lift your finger without completing the entire slide, or (2) you complete the slide without lifting your finger, in which case it should still unlock.