Add to home screen callout

add-to-home-screen.js

// display "add to home screen" floater on iphones
// copy and paste this anywhere.
(function(){
	if (document.cookie.match(/ADD_HOME_TOUCH=1/)) return;
	document.addEventListener('DOMContentLoaded', function() {
		if (navigator.userAgent.match(/iphone|ipod/i)) {
			// create & inject css
			var parent = document.body;
			var arrowHeight = 56;
			var bubbleHeight = 130;
			var divHeight = bubbleHeight+arrowHeight+36; // padding
			var divWidth  = 280;

			var slideDuration = .2;
			var pauseDuration = 2;
			var delay = 3;
			var css = 
					'	#clayio-bookmarkMe {	' +
					'		height: '+divHeight+'px;	' +
					'		position: fixed;	' +
					'		width: '+divWidth+'px;	' +
					'		left: 50%;	' +
					'		top: 100%;	' +
					'		margin-top: 0;	' +
					'		margin-left: -'+divWidth/2+'px;	' +
					'		-webkit-animation-delay: 0;	' +
					'		-webkit-animation-duration: '+(pauseDuration+slideDuration)+'s;	' +
					'		-webkit-animation-name: slideup;	' +
					'		-webkit-animation-iteration-count: 2;	' +
					'		-webkit-animation-direction: alternate;	' +
					'		background: transparent;	' +
					'	}	' +
					'	@-webkit-keyframes slideup {	' +
					'		from { margin-top: 0; }	' +
					'		'+Math.round(slideDuration/(pauseDuration/2+slideDuration)*100)+'%  { margin-top: -'+divHeight+'px; }	' +
					'		to   { margin-top: -'+divHeight+'px; }	' +
					'	}	' +
					'	#clayio-bookmarkMe .rect {	' +
					'		background: rgba(255, 255, 255, .6);	' +
					'		border: 8px solid rgba(255, 255, 255, .8);	' +
					'		border-radius: 20px;	' +
					'		height: '+bubbleHeight+'px;	' +
					'		color: #333;	' +
					'		font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;	' +
					'		padding: 10px;	' +
					'		position: relative;	' +
					'		box-shadow: 0 3px 40px rgba(0,0,0,.2);	' +
					'	}	' +
					'	#clayio-bookmarkMe .rect .right {	' +
					'		position: absolute;	' +
					'		right: 20px;	' +
					'		top: 0;	' +
					'		bottom: 0;	' +
					'		width: '+(divWidth-20-114)+'px;	' +
					'	}	' +
					'	#clayio-bookmarkMe .rect .right p {	' +
					'		display: table-cell;	' +
					'		vertical-align: middle;	' +
					'		height: '+(bubbleHeight+20)+'px;	' +
					'		font-size: 16px;	' +
					'		margin: 0;	' +
					'		padding: 0;	' +
					'	}	' +
					'	#clayio-bookmarkMe .rect .left {	' +
					'		position: absolute;	' +
					'		left: 10px;	' +
					'		top: 8px;	' +
					'		bottom: 0;	' +
					'		width: 90px;	' +
					'		height: 90px;	' +
					'	}	' +
					'	#clayio-bookmarkMe .rect .left .img {	' +
					'		width: 57px;	' +
					'		height: 57px;	' +
					'		border: 8px solid #fff;	' +
					'		border-radius: 14px;	' +
					'		box-shadow: 0px 2px 8px #999;	' +
					'		background-size: 57px 57px;	' +
					'	}	' +
					'	#clayio-bookmarkMe .triangle {	' +
					'		width: 0;	' +
					'		height: 0;	' +
					'		position: absolute;	' +
					'		left: 50%;	' +
					'		margin-left: -56px;	' +
					'		border-left: 56px solid transparent;	' +
					'		border-right: 56px solid transparent;	' +
					'		border-top: 56px solid #fff;	' +
					'	}	' +
					'';
			var style = document.createElement('style');
			style.type = 'text/css';
			style.innerHTML = css;
			document.head.appendChild(style);
			// find icon image
			var links = document.getElementsByTagName('link');
			var link = null;
			for (var i = 0; i < links.length; i++) {
				if (links[i].rel && links[i].rel.match(/apple-touch-icon/)) {
					link = links[i];
					break;
				}
			}
			var url = (link) ? link.href : '';
			// create & display a div
			var div = document.createElement('div');
			div.id = 'clayio-bookmarkMe';
			var img = '<div class="img" style="background-image:url('+url+');"></div>';
			div.innerHTML = '<div class="rect"><div class="left">'+img+'</div><div class="right"><p>Hey! We '+
					'noticed you\'re using an iOS device. You can add Word Wars to your home page by '+
					'tapping the icon below:</p></div></div><div class="triangle"></div>';
			window.setTimeout(function(){ 
				parent.appendChild(div);
				window.scrollTo(1,1);
				div.style.paddingTop = window.scrollY+'px';  }, delay*1000);
			var hide = function() { div.style.display = 'none'; };
			var addCookie = function() { document.cookie = 'ADD_HOME_TOUCH=1'; };
			var hideAddCookie = function() { hide(); addCookie(); };
			div.addEventListener('click', hideAddCookie);
			div.addEventListener('touchstart', hideAddCookie);
			// hide afterwards just in case animation fails
			window.setTimeout(hide, ((slideDuration+pauseDuration)*2.8+delay)*1000); 
		}
	});
})();

compressed.js

(function(){if(document.cookie.match(/ADD_HOME_TOUCH=1/))return;document.addEventListener("DOMContentLoaded",function(){if(navigator.userAgent.match(/iphone|ipod/i)){var a=document.body;var b=56;var c=130;var d=c+b+36;var e=280;var f=.2;var g=2;var h=3;var i="\t#clayio-bookmarkMe {\t"+"\t\theight: "+d+"px;\t"+"\t\tposition: fixed;\t"+"\t\twidth: "+e+"px;\t"+"\t\tleft: 50%;\t"+"\t\ttop: 100%;\t"+"\t\tmargin-top: 0;\t"+"\t\tmargin-left: -"+e/2+"px;\t"+"\t\t-webkit-animation-delay: 0;\t"+"\t\t-webkit-animation-duration: "+(g+f)+"s;\t"+"\t\t-webkit-animation-name: slideup;\t"+"\t\t-webkit-animation-iteration-count: 2;\t"+"\t\t-webkit-animation-direction: alternate;\t"+"\t\tbackground: transparent;\t"+"\t}\t"+"\t@-webkit-keyframes slideup {\t"+"\t\tfrom { margin-top: 0; }\t"+"\t\t"+Math.round(f/(g/2+f)*100)+"%  { margin-top: -"+d+"px; }\t"+"\t\tto   { margin-top: -"+d+"px; }\t"+"\t}\t"+"\t#clayio-bookmarkMe .rect {\t"+"\t\tbackground: rgba(255, 255, 255, .6);\t"+"\t\tborder: 8px solid rgba(255, 255, 255, .8);\t"+"\t\tborder-radius: 20px;\t"+"\t\theight: "+c+"px;\t"+"\t\tcolor: #333;\t"+'\t\tfont-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosRegular", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:500; font-stretch:normal;\t'+"\t\tpadding: 10px;\t"+"\t\tposition: relative;\t"+"\t\tbox-shadow: 0 3px 40px rgba(0,0,0,.2);\t"+"\t}\t"+"\t#clayio-bookmarkMe .rect .right {\t"+"\t\tposition: absolute;\t"+"\t\tright: 20px;\t"+"\t\ttop: 0;\t"+"\t\tbottom: 0;\t"+"\t\twidth: "+(e-20-114)+"px;\t"+"\t}\t"+"\t#clayio-bookmarkMe .rect .right p {\t"+"\t\tdisplay: table-cell;\t"+"\t\tvertical-align: middle;\t"+"\t\theight: "+(c+20)+"px;\t"+"\t\tfont-size: 16px;\t"+"\t\tmargin: 0;\t"+"\t\tpadding: 0;\t"+"\t}\t"+"\t#clayio-bookmarkMe .rect .left {\t"+"\t\tposition: absolute;\t"+"\t\tleft: 10px;\t"+"\t\ttop: 8px;\t"+"\t\tbottom: 0;\t"+"\t\twidth: 90px;\t"+"\t\theight: 90px;\t"+"\t}\t"+"\t#clayio-bookmarkMe .rect .left .img {\t"+"\t\twidth: 57px;\t"+"\t\theight: 57px;\t"+"\t\tborder: 8px solid #fff;\t"+"\t\tborder-radius: 14px;\t"+"\t\tbox-shadow: 0px 2px 8px #999;\t"+"\t\tbackground-size: 57px 57px;\t"+"\t}\t"+"\t#clayio-bookmarkMe .triangle {\t"+"\t\twidth: 0;\t"+"\t\theight: 0;\t"+"\t\tposition: absolute;\t"+"\t\tleft: 50%;\t"+"\t\tmargin-left: -56px;\t"+"\t\tborder-left: 56px solid transparent;\t"+"\t\tborder-right: 56px solid transparent;\t"+"\t\tborder-top: 56px solid #fff;\t"+"\t}\t"+"";var j=document.createElement("style");j.type="text/css";j.innerHTML=i;document.head.appendChild(j);var k=document.getElementsByTagName("link");var l=null;for(var m=0;m<k.length;m++){if(k[m].rel&&k[m].rel.match(/apple-touch-icon/)){l=k[m];break}}var n=l?l.href:"";var o=document.createElement("div");o.id="clayio-bookmarkMe";var p='<div class="img" style="background-image:url('+n+');"></div>';o.innerHTML='<div class="rect"><div class="left">'+p+'</div><div class="right"><p>Hey! We '+"noticed you're using an iOS device. You can add Word Wars to your home page by "+'tapping the icon below:</p></div></div><div class="triangle"></div>';window.setTimeout(function(){a.appendChild(o);window.scrollTo(1,1);o.style.paddingTop=window.scrollY+"px"},h*1e3);var q=function(){o.style.display="none"};var r=function(){document.cookie="ADD_HOME_TOUCH=1"};var s=function(){q();r()};o.addEventListener("click",s);o.addEventListener("touchstart",s);window.setTimeout(q,((f+g)*2.8+h)*1e3)}})})()

good job!