The iPhone Springboard in XHTML, CSS and jQuery

Avatar of Marco Kuiper
Marco Kuiper on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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!