Creating the iPhone Contacts App using CSS and jQuery

Placed in: Home

The iPhone Contacts App with CSS and jQuery

Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser.

The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials.

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 Scrolling box - iPhone contacts style

Download Scrolling box - iPhone contacts style

Features:

XHTML and CSS valid.
"Top indicator" changes character while scrolling (Just like the iPhone).
Including "Search" on the right (Just like the iPhone).
Pretty sleek interface, including see-through elements (Just like the iPhone).
Falls back nicely when the user has JavaScript disabled.
Combined with the unlock and springboard screen, it looks like the real deal.
Tested and working on Firefox 3, Internet Explorer 7 (With fixes) and Safari 3.

Known issues

The "top indicator" doesn't always show the correct character, especially when using the search.
The "top indicator" is placed on top of the scrollbar of the browser.
I wrote some pretty damn ugly JavaScript (Hey, it works).
Works crappy on an actual iPhone.
Only works correct when browser doesn't scroll. For people with a small screen resolution, here's a smaller demo (I just changed the CSS and images to 50% of the original size).

Other than those minor issues, it works as expected. Make sure you check it out!

So you want to know how I created that page?

XHTML

Here's a part of the HTML of the page:

 
<div id="iphone-scrollcontainer">
   <ul id="iphone-search">
       <li><a href="#A" title="A">A</a></li>
        <li><a href="#B" title="B">B</a></li>
        <li><a href="#C" title="C">C</a></li>
        <li><a href="#D" title="D">D</a></li>
        <li><a href="#E" title="E">E</a></li>
        <!-- More characters here -->
    </ul>
   <ul id="iphone-scroll">
      <li>
        <div id="nav-indicator-fixed"></div>
        <a name="A"></a>
      <div class="nav-indicator" id="nav-a">A</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Arnhem" title="Arnhem"><strong>Arnhem</strong>144,101</a></li>
            <!-- More info here -->
         </ul>
      </li>
      <li>
        <a name="B"></a>
      <div class="nav-indicator" id="nav-b">B</div>
         <ul>
            <li><a href="http://en.wikipedia.org/wiki/Bolsward" title="Bolsward"><strong>Bolsward</strong>9,607</a></li>
            <li><a href="http://en.wikipedia.org/wiki/Buren" title="Buren"><strong>Buren</strong>25,644</a></li>
            <!-- More info here -->
         </ul>   
      </li>
   </ul>
</div>

Here's some information about the nodes:

#iphone-search - This is the "search-bar" on the right side of the iPhone, displaying characters for a fast lookup. This works with HTML anchors for when users have JavaScript disabled.
#nav-indicator-fixed - The navigation indicator is used to display the current character where the user is when scrolling, just like the real iPhone. The div is empty since we'll use JavaScript to display the current character.
#nav-indicator - This is the place with the seperator displaying the character.

Those were the most important parts. Everything else should be pretty straightforward.

CSS

This page wouldn't look really pretty without the power of CSS. I also used the iPhone layout created by Tehan+Lax.

 
#iphone-scrollcontainer { height:461px; width:320px; overflow:auto; position:absolute; top:140px; left:40px; }
#iphone-scroll { list-style: none; padding:0; margin:0; font-family:Georgia, Times, serif; font-size:15px; }
#iphone-scroll li {  }
#iphone-scroll ul { list-style: none; padding:0; margin:0; }
#iphone-scroll ul li {  }
#iphone-scroll ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
  border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#iphone-scroll ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }
#iphone-scroll ul li a strong { margin-right:10px; }
 
.nav-indicator { line-height:20px; background-image:url(../images/nav-indicator-bg.png); background-repeat:repeat-x; color:#FFFFFF; text-indent:20px; }
 
#nav-indicator-fixed { line-height:20px; background-image:url(../images/nav-indicator-bg.png); background-repeat:repeat-x; color:#FFFFFF; text-indent:20px;
position:fixed; width:320px; }
 
#iphone-search { list-style: none; padding:0 5px; margin:0; font-family:Georgia, Times, serif; font-size:12px; line-height:17px; left:315px; margin-top: 20px;
position:fixed; text-align:center; font-weight:bold; }
#iphone-search li a { text-decoration:none; color:#666666; }
#iphone-search li a:hover { color:#000000; }
.searchbg { background-color:#999999; }

Nothing really fancy going on over here: Just some CSS styling as it should be. Only some notes:

#iphone-search - is placed on a fixed position (this is the reason that this doesn't work correctly when the user is resizing is browser).
#iphone-scroll ul li a - is displayed as a block element to make the hover-effect work and still be HTML-valid.

JavaScript

Now this is the real fun part. Although there are already comments added to the source, I still want to explain some of the most important part of the code here.

 
$(document).ready(function()
{
   // First time, the indicator needs a character
   $("#nav-indicator-fixed").append("A");
   
   // Fading out the search bar
   $("#iphone-search").fadeTo(1, 0.85);
   
   // Append background when search bar is hovered
   $("#iphone-search").hover(function() {
      $("#iphone-search").addClass("searchbg");
   },function() {
      $("#iphone-search").removeClass("searchbg");
   });
   
   // When scrolling, this function checks if the indicator needs to be changed
   var curb = $("#nav-b").position().top;
 
   var changeNavIndicator = function(value) {
      $("#nav-indicator-fixed").replaceWith("<div id=\"nav-indicator-fixed\">"+value+"</div>");
   }
 
   $("#iphone-scrollcontainer").scroll(function()
   {
      if($("#nav-b").position().top < 20 && $("#nav-b").position().top > -20) {
         if(curb < $("#nav-b").position().top) {
            changeNavIndicator("A");
         } else {
            changeNavIndicator("B");
         }
         curb = $("#nav-b").position().top;
      }
   }
   
   // Fade the indicator, staying CSS2.1 valid
   $("#nav-indicator-fixed").fadeTo(1, 0.85);
}

I think most of the things are made already really clear.

$("#iphone-scrollcontainer").scroll( - The function that's called when the user starts scrolling. This is the moment when jQuery keeps on checking if it passed a bar and if it needs to change the nav indicator (calling that function).
$("#iphone-search").hover( - When the user is hovering over the search-bar, jQuery will append a class to it to add a background colour. When the user is not hovering anymore, the class is removed.
var curb = $("#nav-b").position().top; - The position from a certain navigator is stored in a variable to be used later when the user is scrolling past it.
if($("#nav-b").position().top < 20 && $("#nav-b").position().top > -20) { - This statement checks if the user is scrolling up or down and checks which character should be displayed in the navigator bar.

Conclusion and download

If you view the JavaScript file, you'll see it's pretty dirty code. If you want to refactor it, be my guest! There are also some minor downsides to this screen, but other than that, it's working pretty nice. What do you think about it?

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. Make sure to subscribe to receive the latest updates. Do you think you would be able to use this somewhere? Or do you see some errors that should be fixed?