Skip to content

Instantly share code, notes, and snippets.

@zamartz

zamartz/iAdd2Home

Created April 20, 2014 15:03
Show Gist options
  • Save zamartz/11116292 to your computer and use it in GitHub Desktop.
Save zamartz/11116292 to your computer and use it in GitHub Desktop.
Download ZIP
This creates a pop-up Callout that asks the user to add the current website to their iPhone home screen. It also allows the user the "x" out the callout and set a number of days in a cookie to keep the callout hidden so it in not persistent. Live with more Explanation = http://zamartz.com/Examples/iadd2home/
Raw
iAdd2Home
<head>
<!-- MOBILE SETTINGS -->
<meta name="viewport" content="width = device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- END MOBILE SETTINGS -->
<!-- Javascript Libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<!-- END Javascript Libraries -->
<!-- iAdd2Home CSS -->
<style type="text/css">
#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;
/* CREATE GRADIENT : http://www.colorzilla.com/gradient-editor/*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,0)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 1%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
}
#CLOSECOOKIEX
{
/*General Display "X" */
text-align:center;
width:20px;
height:20px;
float:right;
/*Create "X" Button Style CSS3 */
border:1px solid #ccc;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
-webkit-box-shadow: inset 0px 3px 4px -2px #ccc;
}
.triangle-isosceles:after {
/* creates triangle */
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:46%;
width:0;
border-width:15px 15px 0px;
border-style:solid;
border-color:#CCC transparent;
}
</style>
<!-- END iAdd2Home CSS -->
</head>
<body>
<!-- ========================= -->
<!-- START iPhone2Home Section -->
<!-- ========================= -->
<div id="CLOSECOOKIE" class="triangle-isosceles">Add to Home Screen <div id="CLOSECOOKIEX" onclick="_gaq.push(['_trackEvent','iAdd2Home','Close']);">x</div></div>
<!--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" />
<!-- function ae_detect_ie (see code above) is pasted here -->
<script type="text/javascript" charset="utf-8">
//DETECT FOR iPHONE
jQuery(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
window.scrollTo(0, 1);
$('#CLOSECOOKIE').delay(600).fadeOut('slow');
}else{
window.scrollTo(0, 1);
$('#CLOSECOOKIE').delay(600).fadeIn('slow');
}
};
});
//CREATE COOKIE & CLOSE CALLOUT
$('#CLOSECOOKIEX').click(
function(ADDTOHOME){
if( $.cookie('HomeIcon') == null )
{
$.cookie('HomeIcon', 'HomeHide', { expires: 7, path: '/'})
$('#CLOSECOOKIE').delay(600).fadeOut('slow');
};
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment