Develop Reference

Opening Native Map App from URL On Apple, Android, Windows Devices

Does anyone have further details on how this would be done to handle multiple devices. I would like to target iPhone, Android, and Windows devices. According to this article, you can use different links. Any thoughts on how 3 different links should be used around on single element?
http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VYg3-flVikp

I usually do this:
var isiOS = (navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'));
var isAndroid = navigator.userAgent.match('Android');
var isWP = navigator.userAgent.match('Windows Phone') || navigator.userAgent.match('IEMobile');
if (isiOS){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
$('body').append('<iframe style="visibility: hidden;" src="'+ appURI +'" />');
} else if ((isAndroid) || (isWP)){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
window.location = appURI;
} else { // if (isOtherPlatform)
window.location = siteURL;
}
Note that on iOS, you can not determine if user has the map app installed or not. If you navigate to an app which the user has not installed would result in an ugly message complaining the absent of the target app. The workaround is to open that deep link in the iframe.
Also note that you should always redirect users to the web version of maps after some seconds to provide a smooth flow.

Android InAppBrowser virtual keyboard closes on executeScript(). [phonegap]

I copied my code from the following link. It's a workaround for Passing Data From an InAppBrowser back to the app.
blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser
The problem is that after each executescript() the Keyboard disappears.
This issue status here is "won't fix". So I'm wondering if there is an alternative solution. I only see a reference to KitKat users, but that would only represent a limited amount.
https://issues.apache.org/jira/browse/CB-5449
Suggestions?
setName: function() {
var win = window.open( "http://jsfiddle.net/tj_vantoll/K2yqc/show", "_blank",
"EnableViewPortScale=yes" );
win.addEventListener( "loadstop", function() {
win.executeScript({ code: "localStorage.setItem( 'name', '' );" });
var loop = setInterval(function() {
win.executeScript(
{
code: "localStorage.getItem( 'name' )"
},
function( values ) {
var name = values[ 0 ];
if ( name ) {
clearInterval( loop );
win.close();
$( "h1" ).html( "Welcome " + name + "!" );
}
}
);
});
});
}

Depending on your use case, it might be a feasible workaround to check if the keyboard is currently visible and avoid calling executeScript in that case.
Try using the com.ionic.keyboard plugin to get cordova.plugins.Keyboard.isVisible and use that in your setInterval function.

On Android Browser always getting image width 10810 with jQuery and FileReader

This is weird. I tried to pick up an image to preview it in a div using the HTML5 FileReader.readAsDataURL() function and a inline-image. This works fine on most browsers incl. iPhone's Safari.
But if I'm using the standard Android browser on a Samsung Nexus AND pick a photo which is stored on the phone I alwas get a width of 10810px and a height of 4286px regardless of which size the source image has, when I use a picture directly by taking a new photo it works. I get the correct sizes. :# I tried naturalWitdh, width, using jQUery and native javascript. All with same results
$('#file-input').change(function () {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = this.files ? this.files : this.currentTarget.files;
if (files && files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#picture')
.attr('src', e.target.result).attr('style', '')
.load(function () {
console.log('w:' + $(this).width());
});
};
reader.readAsDataURL(files[0]);
}
} else {
alert('an error message');
}
});

Have you tried hooking chrome up to your computer's chrome to see if the image and or divs are doing anything funky?

I had the same problem and found a solution for android (browser) 4.0 and up.
I found that it works correctly if you use the createObjectURL function to do something like the following:
function getImgSize(input) {
if (input.files && input.files[0]) {
var apiURL = (window.createObjectURL && window)
|| (window.URL && URL.revokeObjectURL && URL)
|| (window.webkitURL && webkitURL);
var url = apiURL.createObjectURL(input.files[0]);
$('#testImg').attr('src', url);
}
}
$('#testImg').on('load',function(){
alert($(this).width()+'*'+$(this).height());
});
$("input").change(function(){
getImgSize(this);
});
See http://jsfiddle.net/bravoman/qm2C5/5/ for a full example and use http://jsfiddle.net/bravoman/qm2C5/5/embedded/result/ to test it on your device/emulator.

rotate3D of CSS3 transform is not working in Android

I've created one App using Phonegap and HTML5 (jqueryMobile). I've put rotate3D for one div,
it is working fine in google chrome and Safari, but it is not working in Android 2.3+
Any suggestion?

I think It is a bug of android browser. I make a function to test if rotate3d is supported and it says Yes:
function styleSupport( prop )
{
var vendorProp;
var supportedProp;
// capitalize first character of the prop to test vendor prefix
var capProp = prop.charAt(0).toUpperCase() + prop.slice(1);
var prefixes = [ "Moz", "Webkit", "O", "ms" ];
var div = document.createElement( "div" );
if ( prop in div.style )
{
//browser supports standard CSS property name
supportedProp = prop;
}
else
{
//otherwise test support for vendor-prefixed property names
for ( var i = 0; i < prefixes.length; i++ )
{
vendorProp = prefixes[i] + capProp;
if ( vendorProp in div.style )
{
supportedProp = vendorProp;
break;
}
}
}
// avoid memory leak in IE
div = null;
return supportedProp;
}
alert(styleSupport('perspective'));
alert(styleSupport('transform'));

As you can see her, CSS transforms3D are not supported by Android 2.3 :
http://caniuse.com/#feat=transforms3d
try to upgrade to Android 4 (it works for me)

Is it possible to scroll divs in Chrome for Android?

Here is a chunk of text inside a scrollable div.
I can scroll it with two fingers in Chrome for Mac. I can scroll it with one finger on my iPad. However, I can't find any way to scroll it in Chrome for Android.
Perhaps there's a work-around using the touch API?

Another quick fix for Chrome for Android (http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/)
First create a function to check whether the it is a touch device...
function isTouchDevice(){
try {
document.createEvent("TouchEvent");
return true;
} catch(e) {
return false;
}
}
then function to make div scrollable
function touchScroll(id){
if( isTouchDevice() ){ //if touch events exist...
var el = document.getElementById(id);
var scrollStartPos = 0;
document.getElementById(id).addEventListener("touchstart", function(event){
scrollStartPos = this.scrollTop + event.touches[0].pageY;
event.preventDefault();
}, false);
document.getElementById(id).addEventListener("touchmove", function(event){
this.scrollTop = scrollStartPos - event.touches[0].pageY;
event.preventDefault();
},false);
}
}
... call the function passing the element id
touchScroll("divIdName");

While browsing through the bug reports on this issue, I found this JavaScript library that solves the problem using touch events. Also it is reportedly fixed in Honeycomb, so hopefully the fix will hit people as soon as they push builds of Ice Cream Sandwich.

All android versions before 3.0 are bugged with overflow:scroll or auto (bug info).
For thoses using jQuery here is a quick fix :
function touchScroll(selector){
var scrollStartPos = 0;
$(selector).live('touchstart', function(event) {
scrollStartPos = this.scrollTop + event.originalEvent.touches[0].pageY;
});
$(selector).live('touchmove', function(event) {
this.scrollTop = scrollStartPos - event.originalEvent.touches[0].pageY;
});
}
and then if using modernizr :
if (Modernizr.touch) {
touchScroll($('.myScrollableContent'))
}
but it's not ideal because all touch-able devices will have this.
If you use Phonegap you can do (somewhere after phonegap inited):
if (window.device && device.platform=="Android" && parseInt(device.version) < 3){
touchScroll($('.myScrollableContent'))
}