Grow your CSS skills. Land your dream job.

The iPhone Springboard in XHTML, CSS and jQuery

Published by Guest Author

This guest article has been written by Marco Kuiper, just another creative design geek that loves xHTML, CSS and jQuery. Marcos home blog can be found on Marcofolio.net.

Last week, I wrote an article on how to create the iPhone Unlock Screen using xHTML, CSS and jQuery. As stated in the article, I would really love to tranfer more of the sleek iPhone design to a webpage. The next obvious step for me, was to create the iPhone Springboard in xHTML, CSS and jQuery.

View DemoDownload Files

Features:

  • XHTML and CSS Valid.
  • Icons "slide in" (main icons) just like the real iPhone.
  • Icons "fade in" (bar icons) just like the real iPhone.
  • Icons "fade out" when clicked, just like the real iPhone.
  • Combined with the Unlock Screen, it looks really like the real deal.
  • Tested and working on Firefox 3, Internet Explorer 7 and Safari 3.
  • Well, what do you want more?

Known issues:

  • It doesn't have the "multi desktop" functionality like the real iPhone, but this can be added in the future.
  • When an icon is clicked, the real iPhone displays a resizing window. You could recreate this effect using an iframe, but I wanted a sleeker and more simple solution. Now, the icons simply fade out.
  • Doesn't (properly) work on a real iPhone, but falls back nicely.

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 high resolution iPhone layout, Teehan+lax helped me out.
  • The PSD from Teehan+lax didn't provide the needed icons, so I got them from Judge on DeviantArt.
  • I wanted to use jQuery for the functionality (Sliding, fading etc.). I'm using current version: 1.3.1

That's about it. With all resources set, we can move on to the next step.

xHTML

I used the following anatomy to be used for the HTML.

As you can see, the

  1. #iphone-scrollcontainer is the overall container for the inside.
  2. #springboard-items is the container for the icons that are not placed in the bar.
  3. #springboard-bar is the bar at the bottom of the phone.
  4. .row is each row, containing icons.
  5. .icon is the container for the actual icon and text.

This leaves us the following xHTML (partially):

<div id="iphone-scrollcontainer">
    <div id="springboard-bar">
        <div class="icon">
            <a href="phone.html" title="Phone" id="ico_btn"><img src="images/icon_phone.png" alt="Phone" /></a>
            <p class="ico_txt">Phone</p>
        </div>
        <!-- Bar Icons Removed -->
    </div>
    <div id="springboard-items">
        <div class="row">
            <div class="icon">
                <a href="#" title="Text" class="ico_btn"><img src="images/icon_text.png" alt="Text" /></a>
                <p class="ico_txt">Text</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <div class="row">
            <div class="icon">
                <a href="#" title="Marcofolio" class="ico_btn"><img src="images/icon_marcofolio.png" alt="Marcofolio" /></a>
                <p class="ico_txt">Marcofolio</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <!-- More Rows Removed -->
    </div>
</div>

The reason why I placed the springboard-bar on top, is because you can than fix it position to the bottom of the iPhone, regardless on how many icons on the springboard there are.

This gave me the perfect xHTML to work with. Now on to the fun part: Adding some colour, styling and more with CSS.

CSS

The CSS for the iPhone Springboard is actually pretty straight forward without much weird things going on. I'm using absolute positioning since the iPhone container has a fixed with, height and position. This is what I came up with.

body { background-image:url(../images/iphone-bg.png); background-repeat:no-repeat; background-color:#25262b; padding:0; margin:0; }
a { outline:none; }
p { padding:0; margin:0; }
img { border:0; }

#iphone-scrollcontainer { height:461px; width:320px; position:absolute; top:140px; left:40px; background-color:#000000; overflow:hidden; }

.row { clear:both; }
.icon { float:left; margin:9px 11px; }
.ico_txt { text-align:center; font-family:Georgia, Times, serif; font-size:10px; color:#d4d4d5; }

#springboard-bar { position:absolute; top:368px; background-image:url(../images/springboard-bar-bg.png);
			background-repeat:repeat-x; width:100%; height:92px; display:none; }
#springboard-bar div.icon { margin-top:13px; }
#springboard-bar div.icon p.ico_txt { margin-top:8px; }

#springboard-items { width:100%; height:368px; display:none; }

I do want to point some things out from the CSS file:

  • #iphone-scrollcontainer has a overflow:hidden; so that the icons will not be displayed when outside the iPhone screen (Before they'll be flying in).
  • #springboard-bar and #springboard-items both have display:none;. With the use of jQuery, we'll fade them in so that they'll be visible.

All ready to go: Now for some serious fun with JavaScript / jQuery to give it the fancy effects.

JavaScript

First, we'll need to understand how the iPhone icons "fly" inside the screen. For that, I had the following reference:

The springboard-bar simply had a "fadeIn" effect which can be achieved easily with jQuery. I needed a different approach for the icons and had to change the xHTML.

<div class="icon">

became

<div class="icon upleft">

I had to change each icon individually, giving them the right class for each corner. Now to actually move them out their position with relative positioning in CSS:

.upleft { position:relative; left:-160px; top:-160px; }
.upright { position:relative; left:160px; top:-160px; }
.downleft { position:relative; left:-160px; top:160px; }
.downright { position:relative; left:160px; top:160px; }

Perfect! This just leaves us with adding some fancy JavaScript effects with jQuery.

$(document).ready(function()
{
	// Fade in the docking bar
	$("#springboard-bar").fadeIn(1500);
	
	// Fade and Slide in the elements
	$("#springboard-items").fadeIn(1000);
	$(".downright").animate({left:0, top:0}, 600);
	$(".downleft").animate({left:0, top:0}, 600);
	$(".upright").animate({left:0, top:0}, 600);
	$(".upleft").animate({left:0, top:0}, 600);
	
	// What will happen when an icon gets clicked
	$(".ico_btn").click(function(event) {
		var element = $(this);
		event.preventDefault();
		$("#springboard-bar").fadeOut("slow");
		$("#springboard-items").fadeOut("slow", function(){
			window.location = element.attr("href");
		});
	});

});

I want to point out some things here too:

  1. event.preventDefault(); prevents the user to be dedirected directly to another URL. First, the icons fade out and when finished, the user goes to another site using window.location.
  2. var element = $(this); allows the DOM element to be saved in a variable. This is needed because we'll need to fetch the href from that element later. If this isn't used, jQuery doesn't know to which URI is needs to go.

That's about it! For some reason, Internet Explorer doesn't fadeIn and animate the icons at the same time, which means that the effect is slightly different in that browser than others. Also, use the Respring to reload the page over and over, just to see the effect.

I hope you all enjoyed it as much as I did while creating it. Feel free to make any changes that you like, I always love to see people being creative with work from others!

Comments

  1. Permalink to comment#

    Neat little effect! Not sure how often this would be used for websites… but elements can be taken out and applied to other problems!

  2. Snookerman
    Permalink to comment#

    That’s not xhtml, thats pseudo-xhtml, very unprofessional.

  3. Pretty nice. But I would fire the fading icons after everything else around them has loaded. Even on a relatively fast connection the icons come in before the background does on first visit. Putting the icon effect within a $(window).load(function() { would do the trick.

  4. Permalink to comment#

    I think the result is cool.

  5. Permalink to comment#

    niceu stuffi :) I like it :D

  6. Nice and pretty! Thanks for this!

  7. Permalink to comment#

    Agree @ snookerman concerning the so called XHTML…besides that the code would be semanticly better when you had used an <ul> or <ol> element for the icons……

    the end result on the screen isn’t that bad though =)

  8. Dean
    Permalink to comment#

    Why?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".