window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 2000 }); } // Do things that will sometimes call sizeChangeCallback() function sizeChangeCallback() { FB.Canvas.setSize(); }
Monthly Archives: June 2011
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
<link rel=”apple-touch-startup-image” href=”myCustomStartupGraphic.png” /> For the iphone
Mobile: removing the address bar of the browser in the iphone
<meta name=”apple-mobile-web-app-capable” content=”yes” /> You can also control the style of the status bar: <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
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 […]