Snippets / PhoneGap

Virtual Keyboard PhoneGap Overlapping Content

Recently I came across a problem when building a mobile app with a form. When I focused on a lt;input> element the keyboard just completely overlapped all the majority of the content and made it near impossible to see what you were writing.

First I added a preference for the keyboard setting in my config.xml and this worked in the latest version of android (4+) but not in 2~.

Eventually after hours of googling I found a StackOverFlow thread which answered the problem. It was that my app was fullscreen. So I just needed to update the confix.xml and set fullscreen to false

10 years ago / Read More

Snippets / PhoneGap

Config changes hydrated apps (PhoneGap Build)

It took me a while to figure out that if you have a app with hydration enabled on PhoneGap Build, it will not display any significant changes you make to the config.xml without completely re-building the app or deleting and re-adding it.

Delete the App

Re-Add the App

10 years ago / Read More

Snippets / PhoneGap

Play local audio on iOS device with PhoneGap

Recently I had a problem getting audio files to play in iOS with PhoneGap (2.9.0) while it was working perfectly fine on android devices.

Here's the example code I was using:

// console audio after playing
function audio_win(response)  { console.log('Audio FAILED' + response); }
function audio_fail(response) { console.log('Audio WINNER' + response); }

// file path for ios 
// src = file:///var/mobile/Applications/271BF94B-8540-43FB-944E-39E5AC7A9A3F/[APP-PACKAGE-NAME]/www/sounds/filename.mp3
var src = location.origin;

// call the media function
var audio = new Media(src, audio_win, audio_fail );

// PRODUCES ERROR
audio.play()

Here's the updated fixed version:

// console audio after playing
function audio_win(response)  { console.log('Audio FAILED' + response); }
function audio_fail(response) { console.log('Audio WINNER' + response); }

// file path for ios 
// src = file:///var/mobile/Applications/271BF94B-8540-43FB-944E-39E5AC7A9A3F/[APP-PACKAGE-NAME]/www/sounds/filename.mp3
var src = location.origin;

// ADDED
// remove file:// if on ios
if( device.platform === 'iOS' ) {
    src = src.replace('file://', '');
}

// call the media function
var audio = new Media(src, audio_win, audio_fail );

// WORKS!
audio.play()

Don't forget the PhoneGap APIs

In order to use the global variable device you will have to add the following in your config.xml, also remember you need to add the media API.

10 years ago / Read More