mobile: SQL client side database storage

You hear it right: it is available on Safari on the iphone… Example here: Users have 5MB default db size, after that the app will ask them if they want to increase it. Here’s an example on how to create one: var shortName = ‘Kilo’; var version = ‘1.0’; var displayName = ‘Kilo’; var […]

mobile: client side local storage for Safari on the iphone

localStorage.setItem(‘age’, 40); // Stores “age” js variable locally var age = localStorage.getItem(‘age’); // Gets the value localStorage.removeItem(‘age’); // Remove the item localStorage.clear(); // Removes all local storage Use sessionStorage instead if you just want to store it for as far as the window session is alive.

mobile: Dissecting a JQTouch app 1) By default, it runs in full iphone screen mode, and adding an icon and styling the top nav bar is a breeze: <script type=”text/javascript”> var jQT = $.jQTouch({ icon: ‘kilo.png’, statusBar: ‘black’ }); </script> 2) <ul class=”edgetoedge”> does the magic of creating the iphone tab-like system with the li’s 3) Notice how the href […]

Mobile: creating an icon for the iphone

When a user bookmark your web page, you can control the icon that will show on the iphone screen as the shortcut to your app as follows: <link rel=”apple-touch-startup-image” media=”(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)” href=”iphone.png” /> <link rel=”apple-touch-startup-image” media=”(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)” href=”iphone4.png” /> <link rel=”apple-touch-startup-image” media=”(max-device-width: 1024px) and (orientation: portrait)” href=”ipad-portrait.png” /> […]

Mobile: creating a simple ajax pattern for mobile pages

This is a really interesting and simple way to handle ajax request using a sort of “controller” sitting in between your page and the different pages that get served in your mobile app (see real example at: 1) A page with an empty container is served. The empty container is loaded via load(), based […]

Mobile: Targeting a page to be in a mobile screen

Here’s the live example (plagiarized from 1) font-family: Helvetica; is the recommended font for simulating the iphone look and feel 2) text-shadow: 0px 1px 0px #fff; adds a little bit of a white background to the bottom of the text on the header 3) background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); Interestingly enough, the background gradient is not […]