I am implementing a webapp using jQuery Mobile and Phonegap. One thing I am missing, is the following: The App should scroll to the top when the statusbar is tapped.
I have already seen that using Objective C one has to indicate the view that has to scroll to top on tap. Is it possible to do something similar with Javascript/Phonegap?
Update for 22.9.2016
It's working fine
Plugin ID has changed, install it using:
cordova plugin add cordova-plugin-statusbar
Tested with cordova-6.3.1 cordova-ios-4.2.2 in the iOS 10.0 simulator and an iPhone 6s Plus running 9.3.5.
The official status-bar plugin has this feature.
https://github.com/apache/cordova-plugin-statusbar
Install:
cordova plugin add org.apache.cordova.statusbar
In your javascript:
window.addEventListener('statusTap', function() {
//scroll-up or do whatever you want
});
I wrote a plugin to solve this issue
https://github.com/j-mcnally/cordova-statusTap
you can register tap events on the status bar and handle this all in code. With an event listener.
if the content that you are displaying in the phonegap app is bigger then the bounds of the webview, the scroll happens automatically.
Otherwise - for example if you are just scrolling a div using -webkit-overflow-scrolling - you need to use the solution found here:
How to detect touches in status bar
In the scrollViewShouldScrollToTop you need to call
[theWebView stringByEvaluatingJavaScriptFromString:"should_scroll_to_top"];
should_scroll_to_top is a normal function in your js.
Related
I've been trying to solve this particular bug for quite a while, but I haven't made any progress in fixing it.
Anyway, the bug basically is where when clicking on an input, the keyboard will cover the input until I start inputting numbers, at which point it'll scroll down correctly.. (Also, it suddenly loses its translucency and becomes solid... I'm not sure what's causing that either...)'
I've already uninstalled ionic-plugin-keyboard, and downgrading cordova-plugin-ionic-keyboard to version 2.0.5 didn't fix the issue for me (I'm currently running v2.2.0). I'm also running the latest version of cordova-plugin-ionic-webview (v4.1.2)
Here's an imgur link showing the bug in action
Thank you!
Unstable for IOS 13
"cordova-plugin-ionic-keyboard" KeyboardResize feature is unstable for IOS 13.
Issue is still open on git with no proper solution.
View not resizing on iOS
I am using it in both Android and IOS so i had to came up with a workaround in my code(not a good one btw but works so i am putting it here).
Step 1: Set resizing to none in for config.xml
<preference name="KeyboardResize" value="false" />
Step 2: Add an empty div just above your footer with display set to none.
<div class="keyboardFix" style="display:none"></div>
Step 3: Now set the height of .keyboardFix class equal to keyboard height and make it visible just before keyboard using "keyboardWillShow" event.
window.addEventListener("keyboardWillShow", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS') {
$(".keyboardFix").height(evt.keyboardHeight * 0.9 );
$(".keyboardFix").css("display","block");
}
});
Step 4: Make is go away just before keyboard hides.
window.addEventListener("keyboardWillHide", function (evt) {
if (rootParams.baseModel.cordovaDevice() && rootParams.baseModel.cordovaDevice() == 'IOS'){
$(".keyboardFix").height(0);
$(".keyboardFix").css("display","none");
}
});
Note: If condition only required if you are using same UI for cross platform i.e. Android
I'm using the ionic framework for the first time to develop a hybrid app (version is up to date). Upon testing my current work with the provided DevApp, I cannot get the accessory bar to show above my iPhone keyboard by any means. I tried to install the https://ionicframework.com/docs/native/keyboard/, added it to my modules and in app.components.ts my constructor looks like this:
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, keyboard : Keyboard) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
keyboard.hideFormAccessoryBar(false);
});
}
There are no errors in the console, only the bar is not appearing. Is it only because of the DevApp, or am I doing another mistake?
If more information is required, I will be glad to provide it. Thanks in advance!
I've created an app for Android and iOS using Phonegap and Ionic Framework, the goes perfectly on Android but it has an issue on iOS specially with the iPhone 5 and the iPad (It works well on iPhone 6 and 4).
When you tap a button that makes the rol of a backbutton, the back animation is shown but inmediatly the goes back to the section where the backbutton was taped. It only happens on one section, the backbutton works perfectly on the others sections.
The HTML element is the following:
<a class="button button-icon button-positive button-positive icon ion-arrow-left-c" ng-click="atras()">
The function called is "atras" which is the following (Located in the controller of the template):
$scope.atras = function() {
$ionicHistory.goBack();
};
Have any idea of how could i resolve this? Thanks a lot for your answers!
Specifically, there is a notable patch for Ionic UIWebView that are built on iOS9. Without this patch, you will experience such flickering issue when you tap on some back buttons in navigation bar. Please apply ngIOS9UIWebViewPatch for your project then it's all done.
https://gist.github.com/IgorMinar/863acd413e3925bf282c
http://blog.ionic.io/ios-9-potential-breaking-change/
Unfortunately iOS 9 has some bugs with with window.location that impact the router-ui and also some empty href links <a href="#"> like yours.
Take a look to these articles from Ionic's blog:
Preparing for iOS 9
iOS 9 Potential Breaking Change
There you can find the link to the iOS9 patch for angular and this for Disable App Transport Security in iOS 9
Add these two properties to prevent flickering effects:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Apply also to flickering elements which AREN'T being animated for the same fix.
We are trying to display an indicator that the web page is loading when launching an instance of InAppBrowser on iOS version of Cordova 3.4.
Android works fine with a spinner on the bottom, but iOS shows nothing but a white screen until the page suddenly pops up.
We were initially looking into using event listeners:
https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#addeventlistener
to listen to loadstart and loadstop and add js/css to show loading within the appbrowser window
https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#executescript
and
https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#insertcss
Still working on a viable solution.
The iOS InAppBrowser object has its own spinner which it adds to the webview automatically.
However, as the spinner is created as UIActivityIndicatorViewStyleWhite and the background of the webview is white you can't see it.
So I updated this like so:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
Also, the x co-ordinate of the spinner's frame are outside the bounds of an iPhones view. To fix this I updated the frame to:
self.spinner.frame = CGRectMake(self.view.frame.size.width / 2 - 10, self.view.frame.size.height/ 2 - 10, 20, 20);
This should centre the spinner no matter what size of device you are using.
I have only tested this in portrait mode.
You may want to fork Cordova (I'm testing this with 3.4) and submit a patch or see if there is a "proper" way to do this.
For anyone else using Phonegap Build, you can use my public plugin that implements these changes and makes the loading indicator (spinner) appear as it should in iOS.
Add this to your config.xml in your Phonegap Build project in place of the default InAppBrowser plugin to get the grey spinner described above by Goku:
<gap:plugin name="com.cordova.plugin.inappbrowser.with.loading.spinner" version="1.0.2" />
I've integrate phonergap WebView in iOS .
Requirement ::
How to resize cordova WebView when user click on a Button (Which is created in Cordova WebView).
In my App, Cordova WebView is actually added as a subview on my ViewController view.
It's hard to tell you an accurate answer without seeing your code, but you should do something like this:
you have to create a plugin (see the guide)
and the native code should do something like this:
[self.yourCordovaViewController.view setFrame:CGRectMake(x, y, width, height)];