June 2011 – Notes and Random Stuff

Facebook: resizing an iframe dynamically

window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 2000 }); } // Do things that will sometimes call sizeChangeCallback() function sizeChangeCallback() { FB.Canvas.setSize(); }

mobile: cache offline apps and cache-manifest files

A manifest file indicates the browser what files are needed to run the app offline, so the browser will store them locally for when there is no internet connection. Example, if you create demo.manifest and put it on your web root, and the content of the file is as below, the files listed will be […]

mobile: SQL client side database storage

You hear it right: it is available on Safari on the iphone… Example here: http://onsubject.com/mobile_examples/iphone_local_storage/ 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

http://onsubject.com/mobile_examples/JQTouch_example/ 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: provide a customize “loading…” image while a page is loading

Mobile: removing the address bar of the browser in the iphone

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: http://onsubject.com/mobile_examples/iphone_ajax/iphone.html) 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 http://oreilly.com/catalog/9780596805784/): http://onsubject.com/mobile_examples/iphone_look/ 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 […]