you are here: codestackercodes [RSS] → tag ios [RSS]

useful html5 attributes for iOS

<!-- For a username, you don't want to autocorrect, nor do you want a capitalised first letter. -->
<input type="text" autocorrect="off" autocapitalize="off">

<!-- Turn telephone detection off -->
<meta name="format-detection" content="telephone=no" />

<!-- Make webpage an app (get rid of top bar) when bookmarked to home screen -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- Number keyboards -->
<input type="tel" /> <input pattern="[0-9]*">

<!-- URL/Emails -->
<input type="url"> <input type="email">

<!-- Links -->
<a href="http://maps.google.com/maps?q=Moon">Open in Google Maps</a>
<a href="tel:01234567890">Open the phone</a>
<a href="twitter:Tweet Tweet Tweet">Open the Twitter for iPhone app</a>

hide address bar in safari mobile

this code lets you hide the address bar in safari mobile. your webapp will look like a native one.

<body onload="window.scrollTo(0, 1)">

iOS volume-style popup in Mobile Safari

preview: http://cl.ly/4AK4

<style>
div#popup {
        background-color: rgba(0,0,0,.5);
        border-radius: 10px;
        color: #ffffff;
        font-weight: bold;
        font-family: Arial;
        height: 160px;
        line-height: 50px;
        margin: 0 auto;
        text-align: center;
        text-shadow: 0px 1px 0px #000000;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        width: 160px;
}
</style>

<li id="toggle">
        <a href="#">button <!--activates the popup--> </a>
</li>

<div id="popup" style="display: none">Popup...</div> 

<!--popup script must be placed below the DIV--> 
<script> 
        $("#toggle").click(function () {
        $("#popup").fadeIn("fast");
        $("#popup").delay(3500).fadeOut();
});
</script> 
<!--/popup script--> 
Displaying all 3 Code