We are currently developing a "hybrid" app using Intel's App Framework (formerly jqMobi/appMobi), but we have run into a problem.
The actual problem is that when running inside an Android WebView (on an actual Android device), the webpage shows a rather big scrollbar. Even if there is no content on the webpage, it still gives us the opportunity to scroll way down!
When using the browser on the Android device and visit the webpage, it is not scrollable, just like we want it.
Our html looks like this (see below)....as you can see there's nothing actual on the page!
I really hope someone can help us out here...
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="js/appframework.min.js"></script>
<script type="text/javascript" src="js/appframework.ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/af.ui.min.css" />
</head>
<body>
</body>
</html>
The WebView is configured like this:
mWebView = (WebView) findViewById(R.id.activity_main_webview);
mWebView.setClickable(true);
mWebView.setFocusableInTouchMode(true);
mWebView.addJavascriptInterface(new WebAppInterface(MainActivity.this), "Android");
mWebView.setWebViewClient(new WebClientClass());
mWebView.setWebChromeClient(new WebChromeClass());
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
Here is a link to a screenshot:
Screenshot
I think you have an old version of Intel AppFramework, try with the latest.
I do not see the issues on Android 4.4, Nexus5. I just replaced the AppFramework scripts with the link to latest CDN and tested the code:
<!DOCTYPE html>
<html>
<head>
<title>Demo App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.1/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
</head>
<body>
</body>
</html>
Okay, I just seem to have solved the problem I was having...
The problem was in the Android App and not in the Intel's App Framework.
In the manifest file, I wanted to change the theme for an activity, so I had the following code:
<activity
android:name="nl.deburen.boodschappertje.MainActivity"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar" > <!-- THIS LINE GENERATES THE PROBLEM -->
</activity>
Strange behavior, but nonetheless a solution for me... :)
Thanks for the help!
Related
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
I am trying to create an app with phonegap. in iOS, my app works properly. but in Android, my app's first page is not working in app and it always launches a system browser.
https://www.youtube.com/watch?v=ix2M7XdRN7c&feature=youtu.be&t=4m12s
index.html
<html>
<head>
<META HTTP-EQUIV="refresh" CONTENT="0; url=http://www.google.com/">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>title</title>
</head>
<body>
<script type="text/javascript">
window.location.href = "http://www.google.com"
</script>
test link
</body>
</html>
I tried many ways for fix it. ex) use 'meta tag', 'window.location.replace', and 'window.location.href' ...
but my app still launches a system browser just in an android platform.
Please let me know, how can i display my first page without launching a system browser.
Have you tried changing the config.xml ?
<content src="index.html" />
in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
I spend quite some time everyday on stackoverflow. This place is really great!
But this is my very first question, so every advice about it is very welcome :)
I'm working on a mobile app using phonegap. I use less css and it works fine on my nexus 5, but I have an error related to less on my old htc desire under android 2.2 :
undefined_methodError: Object function(a,b){return b instanceof
Array?a=this.flatten(b,a):a.push(b),a} has no method 'bind'
in index.less on line null, column 0:
1 // Constants
The last line is the first line in my index.css file.
I've been looking on google and here for two days and I don't find anything.
Here is my index.html code:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet/less" type="text/css" href="app/index.less" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="lib/async.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/handlebars.js"></script>
<script>
less = {
log_level: 1
}
</script>
<script type="text/javascript" src="lib/less-1.5.0.min.js"></script>
<title>Kwali.to</title>
</head>
<body>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
I need to "compile" the less code on the client because I have many sizes that are dependent to the screen resolution.
I really have no idea how to solve this and I hope it's not just a matter of incompatibility with my too old android...
How to solve this? What can I do to make my code work? Any help will be appreciated :)
Thank you guys!
See "Less Browser Support". I.e. Less requires an ES-5 compatible JavaScript environment to run in. You can use es5-shim polyfill which will add the JavaScript features that Less requires.
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>