Hi, my name is Timo Ernst and I am a web expert.

Failed PhoneGap Update kills project

Posted on: September 17th, 2013 by Timo

Before you get the newest Cordova version for your PhoneGap project and run the update script, you better might want to back it up, or otherwise:

taylor:bin valmar$ ./update ~/dev/android/myp
An unexpected error occurred: ANDROID_BIN="${ANDROID_BIN:=$( which android )}" exited with 1
Deleting project...

Thank you, PhoneGap for deleting my project!

TwitterFacebookShare

How to read cookies in a Phonegap-based Android app with Java

Posted on: September 3rd, 2013 by Timo

Just took me forever to get this straight, here is the trick on how to do it:

CookieSyncManager sym = CookieSyncManager.createInstance(appView.getContext());
CookieManager com = CookieManager.getInstance();
sym.sync();
String cookie = com.getCookie("file:///android_asset");

if (cookie == null) Log.d("MainActivity", "Cookie is null");
else{
	Log.d("MainActivity", "Cookie exists, value is:");
	Log.d("MainActivity", cookie);
}
TwitterFacebookShare

Setting Futura Condensed Medium as CSS font family

Posted on: June 23rd, 2013 by Timo

It just took me forever to find out how to set the right font family for Futura Condensed Medium. There is a lot of bullshit on the web what the correct family name should be and they’re all wrong, so here is the right way:

font-family:'Futura-CondensedMedium'

TwitterFacebookShare

How to hide the address bar on iPhone5 Safari browser

Posted on: April 9th, 2013 by Timo

If you created a website with 100% height, you might encounter the problem that iPhone5 doesn’t hide the address bar while iPhone 4/4s and older do hide it.

Existing solutions

There are quite some JavaScript-based solutions on this issue that use scrollTop() and add a margin at the bottom of your page, e.g.:

That’s pretty complicated and I encountered the problem that this approach can lead to whitespace at the bottom of your page.

So I found a really way easier solution.

The better approach

Since you created a website with 100% height, I assume that you applied via css:

html,body{height:100%}

Now, for iPhone5 simply change this to:

html{height:504px}
body{height:100%}

This will tell Safari that your website is just 1px taller than the maximum visible part of your html document and the browser will automatically hide the address bar. That simple :-)

Warning!

Do not apply this to any other phone except for iPhone 5!

If you need to detect iPhone5, I recommend this script: Simple iPhone 5 detection with JavaScript

So you could do:

if (isIphone5()) $("html").css("height", "504px");
else $("html").css("height", "100%");
$("body").css("height", "100%");
TwitterFacebookShare

Simple iPhone5 detection with JavaScript

Posted on: April 9th, 2013 by Timo

It’s really simple, just use this function:

function isIphone5(){
	function iOSVersion(){
		var agent = window.navigator.userAgent,
		start = agent.indexOf( 'OS ' );
		if( (agent.indexOf( 'iPhone' ) > -1) && start > -1)
			return window.Number( agent.substr( start + 3, 3 ).replace( '_', '.' ) );
		else return 0;
	}
	return iOSVersion() >= 6 && window.devicePixelRatio >= 2 && screen.availHeight==548 ? true : false;
} 

Now simply call isIphone5() which will return true if:

  • The device is an iPhone
  • and if iOS version is at least 6
  • and if the device has a retina display
  • and if the screen has a height of 548px

These conditions (currently) only apply to iPhone5.

If the user is not on iPhone5 the method will return false.

TwitterFacebookShare