Gotcha: Including Jquery mobile in the page will hide all page elements

If you are using phoneGap inside dreamweaver, and setup a mobile site, but don’t use Jquery library to make the UI, don’t forget to remove the CSS and JS references to the mobile library that dreamweaver puts there by default, because if you don’t, your document will not show any HTML at all, confusing the […]

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 […]