Bug width on Android browser with FB.init() - android

I developp a mobile web app with facebook javascript SDK.
I use the meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> to scale my content. But when I init my facebook app FB.init(), page width expands a lot and horizontal scroll appears.
How to fix this bug width on Android browser ? (don't appear on iOS)

We were encountering this same issue and we came up with a workaround. Note that obviously this may be outdated in future FB API modifications.
We had to load in the FB SDK asyncronously and make sure the XFBML param is set to false.
<!-- this div element is required by FB JS SDK -->
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: facebookapikey, status: false, cookie: false, xfbml: false});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Hope that helps everyone out.

Related

Android Chrome corrupts soft keyboard area after returning from Facebook dialog

Environment: Mobile (Galaxy), Android, Chrome. I have a parent website and an iframe on top of it, which covers the whole screen (with large z-index).
On clicking a button in the iframe, I call a facebook 'Share' dialog, which works great... except that after returning from the dialog, the rectangular space at the bottom, which used to hold the soft keyboard, now shows the parent background website, thus cropping the iframe in the middle. Even refresh doesn't change that.
The only ugly workaround I've found is: After returning from facebook dialog, add a click event wherever, which invokes a function that temporarily reveals and hides the soft keyboard (using one of the many examples that focus on some dummy input text field).
Here is the essence of the iframe code. Nothing special. Note same code does not produce this problem on an iPhone or on a Nexus I also tested.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
</head>
<body dir="rtl">
<div style="display:block;">
<img src="sharfb.png" style="cursor:pointer;" onclick="fbShareDialog();" />
</div>
<script>
window.fbAsyncInit = function() {
FB.init({appId : '.......',
status : false,
cookie : false,
xfbml : true,
frictionlessRequests : true});
};
(function(){
if (document.getElementById('facebook-jssdk')) {return;}
var fjs = document.getElementsByTagName('script')[0];
var js = document.createElement('script');
js.id = 'facebook-jssdk';
js.src = '//connect.facebook.net/he_IL/all.js';
fjs.parentNode.insertBefore(js, fjs);
}());
function fbShareDialog() {
var params = {method: 'share', href: 'http://www.example.com'};
FB.ui(params, function(response){;});
}
</script>
</body>
</html>

script popup for android and iOS - for your device exist app, how?

I developed simple android and iOS app.
I want when user is in my site (from mobile phone), to popup text with redirect to google play or apple store, "for your device is available android or iOS application".
My question is how to do that?
Which script i can put in my website so when user surfing on my website from mobile device to popup information that exist mobile application for his device?
Thank you
The way I would do this, first find the mobile type using mobile agent and base on that will redirect to the correct locations. e.g. putting the java scripts on top of your header page between
<head></head>
<script>
if( /iPhone|iPod/i.test(navigator.userAgent) ) {
window.location = "YOUR apple app url goes here";
} else if( /Android/i.test(navigator.userAgent) ) {
window.location = "YOUR google play app url goes here";
}
</script>
For Iphone devices
you need to add this in head
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
affiliate-data and app-argument is optional
For Android Devices
There is no native support for App Banners
You need to create yourself banner or use the jquery plugin click here to download
Here is the markup
<head>
<!-- copy head -->
<meta name="google-play-app" content="app-id=com.adianteventures.adianteapps.feliz_navidapp">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<!-- end copy head -->
</head>
<body>
...
<!-- copy body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$().smartbanner();
</script>
<!-- end copy body -->
</body>
I have this code in my index.html
if((navigator.userAgent.match(/iPhone/i)) ) {
if (document.cookie.indexOf('iphone_redirect=false') == -1) {
if (confirm('for your device exist iphone app')) {
window.location = 'https://itunes.apple.com/us/app/....';
}
}
}
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf('android') > -1;
if(isAndroid) {
if (confirm('for your device exist iphone app')) {
window.location = 'https://play.google.com/store/apps/details?id=...';
}
}
But i don't know how to make cookie to remember my answer.
If user click "cancel" or "OK" to remember "cancel" or "OK" until user clean cache.
Do you have idea how to make cookie to remember answer?

Cordova InAppBrowser Doesn't scale the page loaded

Can anyone please help me get the external page that the Cordova InAppBrowser loads on Android app to fit to the phone screen size ?.
I am invoking the inapp browser from a Sencha Touch app using the follwing code.
var opt = 'location=no,clearcache=yes,closebuttoncaption=Back,EnableViewPortScale=yes';
window.open('http://sg-prod-mobilityapi.cloudapp.net','_blank', opt);
When ever I invoke the url I get the following screen
Could anyone please help me out ?.
Add this code into your index.html
<meta content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
name="viewport" />
If the external page fit to the browser viewport, it should have a responsive design. I gone through that url, in that the middle div is set with fixed width and height of 340x380 px. you can only enable the zooming in in app browser.
Also phonegap allow you to execute some scripts after loading the url, just like injecting scripts.
var iabRef = window.open('http://sg-prod-mobilityapi.cloudapp.net', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', replaceCustomStyle);
function replaceCustomStyle() {
iabRef.executeScript({
code: "var itm = document.querySelector('#Main div');
itm.setAttribute('style','width:100%');"
}, function() {
alert("Element Successfully Hijacked");
});
}
Try this and it is documented here

Beginner - Simple AJAX Web Servie call using Android SDK eclipe

I am a beginner in learning Android app development. Here is my issue
I am using the eclipse given along with Android SDK to develop the Apps. To web enable the Apps i have used phonegap build tutorial to add cordova API. Now i am able to see the html file if i just use a normal HTML controls or text. But i have a code which calls a webservice from another WebSphere server and displays the data. When i run the code in IIS server (using DreanWeaver IDE) it works perfectly. But when i try to run this as an app in the emulator (From Android SDK) i dont see any output from the webservice. I can't even see a call from the android app to my webspehere server (which i can see when i run this code as a web page in Dreamweaver). Here is my index.html code. I have included the ws.js and prototype.js inside assets/www/scripts/ if anyone is wondering about that. Can somebody help me to resolve this issue.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/ws.js"></script>
<script type="text/javascript">
function onBodyLoad(name, container)
{
console.log("Here1");
var call = new WS.Call('http://localhost:9080/ILM/services/ILMReports');
var nsuri = '';
var qn_op = new WS.QName('getInboundSearchByItemReport',nsuri);
var qn_op_resp = new WS.QName('getInboundSearchByItemReportResponse',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'name',value:name}
),null,
function(call,envelope) {
var ret =
envelope.get_body().get_all_children()[0].
get_all_children()[0].get_value();
container.innerHTML = ret;
}
);
/*window.location = "TestingAJAXWS.html";*/
}
function onDeviceReady()
{
// do your thing!
navigator.notification.alert("PhoneGap is working")
}
</script>
</head>
<body onload="onBodyLoad('aaa',$('result'))">
<h1>Hey, it's PhoneGap!</h1>
</body>
The problem i can see is the localhost address you are using to access the web service.
Somehow android emulator don't allow to the localhost address as it is unknown to the emulator. (if you know the reason please write)
This is an old thread. But i hope it'l help somebody else.
/T

Android not respecting metatag removal?

I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!

Categories

Resources