I encountered a very strange behaviour in my ionic/cordova app on the windows phone 8.1 platform, where i implemented an instant messenger. I teared my whole application down to a simple cordova (starter) application to eliminate potential side effects with other app related code like other css classes for example. But the issue still remains...
The issue
My app contains an html input element at the bottom of the page, where the user can enter a text for text-messaging. Whenever this input gets focused, the keyboard (inputpane) appears. But after the first focussing (by clicking the 2nd++ time), the input shifts up too far or gets pushed away by the keyboard. These are the screen captures:
Everything is fine on first focus:
Hiding the Keyboard by pressing "back button" and refocussing the input leads into that:
It seems like the whole application gets pushed away by the keyboard out of the screen, since the header bar disappers as well. After tapping on the screen, the view renders correctly (Picture 1), but the usability remains still like a mess. I only figured out, that the space below the input element belongs to the <body> of the DOM.
What i did so far
I started with creating a plain cordova app to narrow down all potential side effects and error sources (Source code on my Github). This was my procedure:
Created a new cordova application with cordova 5.1.1
cordova platform add wp8 & cordova build wp8
Opened the wp8 project file with Visual Studio 2013 and upgraded to a windows phone silverlight 8.1 application (see picture below), because this is a requirement by our app
And started to copy the essential html/css/js code to reproduce the issue in the plain application with:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<div class="bottom">
<input type="search" placeholder="Search">
</div>
</body>
</html>
CSS
.bottom {
position : absolute;
right : 0;
left : 0;
bottom : 0;
}
input {
background-color: pink;
width: 100%;
}
Result
First of all, I thought the problem disappeared. But after some trying I encountered the same behaviour again. It happens quite rarely but still (only once in ~30 times). For me this was the evidence, that for example ionic is not responsible for this issue (see picture below):
It already took days and hours to investigate this behaviour and to try all potential solutions i have found in the world wide web until today. These are for example:
Altering the CordovaView Margin in the MainPage.xaml
Resizing the app natively on keyboard events
Adding event listener to my javascript code
Additionally i installed WEINRE to debug my web related code on the windows phone 8.1 device (Nokia Lumia 930) with minor success. The same issue also appears in a simulator. I can only image, that upgrading to a silverlight 8.1 app is the essential breaking changer.
Have you tried using this $ionicConfigProvider.scrolling.jsScrolling(false) ? In order to enable the native scrolling.
I have the exact same issue.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.scrolling.jsScrolling(false);
// Or for only a single platform, use
// if( ionic.Platform.isAndroid() ) {
// $ionicConfigProvider.scrolling.jsScrolling(false);
// }
}
Related
i need your help.
I use webbrowser in my delphi applications for displaying map.
For unknown reason it has stopped working in all my apps from yestarday.
All my application were working without issues for years.
Example code in delphi:
WebBrowser1.silent := true;
WebBrowser1.Navigate('c:\temp\test.html');
Example content of test.html:
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<script src="https://api.mapy.cz/loader.js"></script>
<script>Loader.load()</script>
</head>
<body style="margin: 0px;">
<div id="mapa" style="width:1900px; height:1160px;"></div>
<script type="text/javascript">
var stred = SMap.Coords.fromJTSK(1077766.44,675681.75);
var mapa = new SMap(JAK.gel("mapa"), stred, 19);
mapa.addDefaultLayer(SMap.DEF_BASE).enable();
</script>
</body>
</html>
I have tried start my delphi apps on different computers with same result - it does not work on any computer, test web page is not displayed.
I have tried create new test application in Delphi 10.4 CE and in Turbo Delphi 2006 too, in both cases same result - test.html is not displayed in webbroser at all. I can open another web pages in webbrowser for example google.cz.
So it seems to me issue may be with test.html content, but same html file is possible to open in browsers like MS Edge, Opera etc. from same computer without any issues...
Now i'm little lost, because I'm not big expert I would appreciate advise how I can solve this issue.
Thanks
The reason why the mentioned map is no longer showing in TWebBrowser is the fact that TWebBrowser is just a wrapper for Internet Explorer. And since with the last update to the map software support for Internet Explorer 11 (latest version of IE available) has been dropped it means that TWebBrowser is no longer capable of showing the said map properly.
You can read more in Map API change-log here
So I'm afraid you will have to replace the TWebBrowser component in your applications either with TEdgeBrowser which is available from Delphi 10.4 or newer or make use of CEF4Delphi which is an open sourced Delphi component for chromium based browser.
You can read more about TEdgeBrowser and how to set it up in Delphi documentation
I don't believe there is any solution to hide bars programmatically using javascript/css/html, but let me try to describe a problem. We are the team of mobile game developers and we have been developing a game for one year.
After iOS 7 announcement we have faced the problem that it is IMPOSSIBLE to hide the navigation bars. Once user taps in the upper or lower part of the Safari browser, navigation bars are appearing again and hide all controls of the game.
The only solution we have found so far is forcing user to:
Rotate device
Scroll the page
Add application to Home-screen
None of these alternatives is acceptable. It looks like Apple is aware of this problem, but keeps ignoring it. They have closed a reported bug as a duplicate of the bug #14076889.
I believe that we are not the only team who experience the same problem. Does anyone know the solution?
Update September 2014: iOS 8 has removed the minimal-ui feature
There's again no way to remove/hide navigation bars other than to rely on the default browser behavior (bars will be hidden when scrolling, but only if the scrolling element is the BODY of the page). The only "workaround" is to save the app to the homescreen and have the proper meta tags set (see below).
Update August 2014: iOS 8 (beta) no longer supports minimal-ui.
There's no workaround. (The reason for this is likely due to abuse by websites that used it to try to prevent people from navigating away, tho there may be new features in iOS 8 Safari that have not been made public yet that replace minimal-ui.)
iOS 7.1 added a new API to solve this problem:
<meta name="viewport" content="minimal-ui">
This new viewport flag hides the Safari UI by default (only a small title bar with URL and SSL indicator are shown). To access the Safari UI, users must actively tap this title bar.
Note that on iOS 7.0.x, there's no API or known workaround for this. In those versions, if you want to hide Safari's browser chrome permanently you need to either get the user to add the web app to the home screen (with the appropriate meta tags set <meta name="apple-mobile-web-app-capable" content="yes">) or use some sort of native app wrapper like Phonegap and distribute via the App Store.
Personally, I wish they hadn't removed the "full screen" button they introduced in landscape mode on iOS 6 Mobile Safari, which was a great solution that made developers and users happy.
A perfect candidate for this to be solved more permanently would be for Mobile Safari to support the HTML5 full screen API (which is supported on Safari on OS X!). Alas, there's no support right now and historically iOS point releases didn't add new Safari features, so maybe that's something for iOS 8.
UPDATE: There is a meta property for fixing this currently in iOS7.1 Beta according to this forum post on the release notes.
<meta name="viewport" content="minimal-ui">
I have run a test and can confirm this feature is currently in Beta 2.
NOTE: The new minimal-ui option is a great solution but it needs to be part of the HTML response.
I tried on iOS7.1 beta3 to append the viewport meta tag with JS
$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');
the value "minimal-ui" is ignored by the browser.
Update: iOS7.1 has now been released so the NDA has lifted.
<meta name="viewport" content="minimal-ui">
Is indeed the correct tag and works in the live release. Remember that "viewport" can support a comma separated list if you require.
I combine it with other mobile variables to make the website feel like an app:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
-
We have been struggling with this one too. We have a TabBar on our site and every time you attempt to click a tab safari controls pop up.
Today hope. If you are a member of the apple developer program, I would strongly suggest visiting this forum: https://devforums.apple.com/message/927476
W
EDIT 2:
Does not work since iOS 7.1
EDIT:
Some games have adopted an overlay that hints the player to scroll away the bars and then locks scrolling until bars pop out again. In this case position: fixed helps a lot, as it stabilizes the movement (can't explain it better, just have to try it for yourself). This game is a good example of such approach:www.paf.com/mobile/launch/flowers.html (sorry, can't post more than 2 links)
Recently I have also stumbled upon a hack that deactivates navigation bar triggering for the top area. All you have to do is add a random element to your DOM with following styles:
z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;
Read more about it here.
If you are creating a web-app, you can create a link to the URL from the home screen; and use the following HTML Meta Tags:
<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
This will super-impose the indicators over your header/nav bar. (The indicators you see on all the iPad screens.
For more info, see:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Hopefully this helps someone, but I didn't want to set my viewport width=device-width.. because its 480px on iphone 4.. and I want my game to be at 800px for all devices.
And if you don't set it, then minimal-ui doesn't register.
My work around is doing:
<meta name="viewport" content="width=device-width, minimal-ui">
And then changing the viewport once the page is loaded:
$(window).load(function(){
$('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
});
I'm pretty shocked it works. The address bar and lower UI buttons only appear if the user clicks the top/bottom of the screen. Love it now.
This solution worked for me, but in my case, the webapp was for
a private public, where I had control of the Ipad that would be used.
I tried to use all possible meta tags and hacks, and really, after
IOS8 have removed the minimal-ui feature, was practically impossible to solve.
Thinking outside the box, our team reached a nice solution:
The Mercury browser opens in fullscreen, and even when pages
are being charged, the address bar does not appear.
It is a small icon on the bottom right and only :)
It worked perfectly for our problem!
But I repeat: do not use it if you are developing a webapp for the public in general.
It's terrible for the UX force your user to download a different browser
to access the app.
UPDATE
A developer friend of mine came up with this solution:
Use a webview inside of Titanium from appcelerator.
It won't be aproved on Apple store, but for a private event, it'll work just fine!
I'm building a PhoneGap Build app that needs to play video. Unfortunately, no native capabilities work, and using HTML5 across all platforms/phones seems to be dubious. Enter launching the phone's native video player.
Problem is, whenever I do this, the window loads up a new, blank page which then launches the native player. After the native player is done, I get brought back to the black page, which then fully reloads the app. I've tried this in the browser as well, and get the same thing.
I'd like a flow that goes "Click => native player launched => native player done => return to app" like what goes down on m.youtube.com. Can't figure it out.
In javascript, I've tried standard stuff (location.href, window.location.redirect, window.location.reload.) I've also dug into the code on m.youtube.com, I don't see anything that would result in this functionality. I tried directly copy-pasting the rtsp:// link into my app, and got the same white page redirect situation that I do with my own http:// video links.
Help here would be awesome. I wouldn't be surprised if this solution exists somewhere on StackOverflow or the Googs, but I've searched for 3 hours and am finding it quite hard to filter the insane variety of search results that come from the search terms I'm using. Let me know if any more information would be helpful. It's kind of worthless, but here's the basic code I've thrown together for this (it's in Sencha Touch, just FYI):
{
name : 'video',
padding : '0 10 0 10',
html : '<a href=javascript:window.location.reload("rtsp://v6.cache3.c.youtube.com/CjYLENy73wIaLQl067BbAoc9uRMYDSANFEIJbXYtZ29vZ2xlSARSBWluZGV4YOuLh9TnzLTcTQw=/0/0/0/video.3gp")>LINK</a>',
},
Have you tried (at least for Android) the VideoPlayer plugin?
This blog post show that it should possible with phonegap
Basically add an iframe with your youtube url as source:
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
And change your phonegap.plist file to:
MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com
This isn't really a successful answer, but after obsessively researching this, everything I found indicated that this wasn't possible with PhoneGap Build. I ended up moving to regular PhoneGap and used the VideoPlayer plugin as a result.
I am developing an iOS/Android app by using HTML5, JS and CSS3 in a WebView. iOS devices and phones with Android 2.x work without any problems. But tablets equipped with Android 3.x or 4.x do not load the webpage.
Basically I am building a webpage like this
<html lang="en" style="-webkit-text-size-adjust:none; display:block;">
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="content-script-type" content="text/javascript">
<title>Project Name</title>
<script type="text/javascript" src="File1.js"></script>
<script type="text/javascript" src="File2.js"></script>
<script type="text/javascript" src="File3.js"></script>
<script type="text/javascript" src="File4.js"></script>
...
<body style="margin: 0px; width: 100%; height: 100%; overflow:hidden">
</body>
</html>
(in total, 25 javascript file includes)
I have overwritten WebViewClient::onPageStarted, WebViewClient::onReceivedError, WebViewClient::onPageFinished. WebViewClient::onPageStarted gets called and the LOG shows the javascripts being loaded. But WebViewClient::onPageFinished never gets called and the webpage does not build. The window "load" callback does not happen and therefore none of the js files get executed.
So, I put an alert popup into my window "load" function and removed one file after the other to see if this helps. And indeed this helped. When I only include 4-6 files the window "load" function gets called. But this is also somehow random and does not depend on which files I remove. LOG does not show any error either. Everything seems to be fine
Is there any limit in number of include files introduced in Android 3.x and later? Android 2.x works without any problem. Also Chrome and Safari on my desktop PC display the site without any errors.
Any ideas?
I am not sure of the limit, but I would suggest using google closure compiler on your js files to get around this issue.
I am trying to make a pop-up form for my mobile web page. It is working perfectly on firefox of my laptop. But when I test the page from an android browser, it's just showing an empty page. Please help me out how can I make my web-page suitable for mobile phones?
Link of my code is http://dl.dropbox.com/u/5420677/myfile.html
To see it, also extract this file into the same folder :
http://dl.dropbox.com/u/5420677/js.zip
A pop-up form is appearing from firefox, but now on android's browser.
When I remove the line no 5,6 and 7, it becomes accessible from android also, but then obviously pop-up functionality disappears, which suggests that javascript is creating some problem...
Thank you.
FYI, 5,6 and 7th lines are
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
For mobile use, have a look at jQuery Mobile - Creating dialogs