-
iPhone "Add to Home Screen" Callout & Home Screen Icon For Your websiteThis tutorial shows how to create a Callout Bubble to Direct Users to add your webpage to their iPhone Home Page.
This tutorial only uses CSS3, APPLE iPhone iOS for Safari, & jQuery. It also creates a 7 day cookie in which the closed callout will stay hidden when users return.
View this page on your iPhone for a LIVE example.
-
STEP #1 - Create Home Screen IconsCreate two different size iPhone Icons without any button effects.
57 x 57 pixels 
114 x 114 pixels (high resolution) 
Live Version (Auto Button Effects) 
-
STEP #2 - Create Callout StructureCreate the Basic shape and radius of the main container and then apply a triangle with CSS3.
Next Create a second shape inside to "x" close the container.
< !-- ADD ANYWHERE ON PAGE in < body> tag -->
< div id="CLOSECOOKIE" class="triangle-isosceles"> Add to Home Screen
< div id="CLOSECOOKIEX" onclick="_gaq.push(['_trackEvent','iAdd2Home','Close']);">
x< /div>< /div>
/* ADD IN SCRIPT TAG */
#CLOSECOOKIE
{
/*General Display "Main" */
display:none;
text-align:center;
width:230px;
padding:5px 10px 5px 10px;
position:fixed;
/*Raise Up From Arrow*/
bottom:15px;
/*Send Left Side to Center */
left:50%;
/* (-) half of (box + padding)*/
margin-left:-126px;
/*Format Text */
color:#666;
font-family:HelveticaNeue-Light;
font-size:1em;
/*Create Main Button Style CSS3 */
border:solid 1px #CCC;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 3px 4px -2px #000000;
} -
STEP #3 - Skin the Callout with CSS3Create a Color Overlay that starts clear and then blends into the boarder and triangle color.
Get Help Creating Complicated Gradiants at http://www.colorzilla.com/
/* ADD IN SCRIPT TAG */
#CLOSECOOKIE
{
/* CREATE GRADIENT : */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,0)), color-stop(100%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 1%,rgba(204,204,204,1) 100%); }
-
STEP #4 - Download & Install jQuery & jQuery PluginAdd the latest jQuery Libary (+ Jquery ) & Add jQuery Cookie Plugin (+ @ GitHub)
< script type="text/javascript" src="/jquery-1.6.1.min.js">
< script type="text/javascript" src="/jquery.cookie.js">
-
STEP #5 - Add iPhone Icon CodingHere are 3 types of icons to upload. First is an icon without the iPhones Auto Effects.
Second is the standard logo. Third is the HiRES version of the logo.
< !--Standard icon NO effects-->
< link rel="apple-touch-icon-precomposed" href="images/ZAMARTZ_ICON_57.png" />
< !--iPhone icon Standard -->
< link rel="apple-touch-icon" sizes="57x57" href="images/ZAMARTZ_ICON_57.png" />
< !--iPhone icon HiRES -->
< link rel="apple-touch-icon" sizes="114x114" href="images/ZAMARTZ_ICON_114.png" />
-
STEP #6 - Detect if iPhone & Display CalloutThe Javascript detects an iPhone device and then will either fade the callout in or error check and fade the callout out. Add within "< script type="text/javascript" charset="utf-8"> < /script> "
//DETECT FOR iPHONEjQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone)/);
if (agentID) {
if( $.cookie('HomeIcon') != null ) {
//ERROR CHECK IF COOKIE FADE OUT ANY WAY
$('#CLOSECOOKIE').delay(600).fadeOut('slow');
}else{
$('#CLOSECOOKIE').delay(600).fadeIn('slow');
}};
});
-
STEP #7 - Create Click Event to Close Callout & Add CookieAdding this jQuery Script Listens for the "x" to be clicked in the callout and creates a cookie with an expiration date and then closes the callout.
Add within "< script type="text/javascript" charset="utf-8"> < /script> "
//CREATE COOKIE & CLOSE CALLOUT$('#CLOSECOOKIEX').click(
function(ADDTOHOME){
if( $.cookie('HomeIcon') == null ) {
$.cookie('HomeIcon', 'HomeHide', { expires: 7, path: '/'}) $('#CLOSECOOKIE').delay(600).fadeOut('slow');
};
});