Created
April 17, 2012 14:25
-
-
Save joevennix/2406265 to your computer and use it in GitHub Desktop.
Add to home screen callout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| } | |
| }); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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)}})})() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
good job!