I have to set the duration of a splash screen. In Android this is quite simple:
(android)config.xml:
<preference name="SplasScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000"/>
SplashScreen: value = splashscreen name in the res/drawable directory. It's recommended to have one name (screen.png) for all types of resolution.
SplashScreenDelay: value = delay in ms (2s)
I have no idea how this could be applied to iOS. At the moment I have set all splashScreens which are loaded at the app-start. After that I have a white screen with a spinner before my app-content is displayed.
This is my standard xml-setting:
(iOS)config.xml:
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="ShowSplashScreenSpinner" value="true" />
If I set ShowSplashScreenSpinner to false, the spinner doesn't appear. Updates to the rest of the settings don't take any effects.
Does anyone know what to do to show a splashScreen in iOS for a optional time?
You can set it a bit differently like this:
First set:
<preference name="AutoHideSplashScreen" value="false" />
So it will not hide the splashscreen automatically.
Second:
In your index.html do this:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
}
This will hide the splashscreen 2 seconds after the onDeviceReady event.
Instead of 2000 milliseconds you can set whatever you want. This setting should work for both Android and iOS.
in config.xml update
<preference name="FadeSplashScreenDuration" value="800" />
<preference name="SplashScreenDelay" value="3000" />
So it will not hide the splashscreen time and whitescreen automatically.
Related
I have added scrollAssist and autoFocusAssist property in app.module.ts. However it works only for android not for iOS.
how to disable bouncing effect of ios in ionic 3?
IonicModule.forRoot(MyApp,{scrollAssist: false, autoFocusAssist: false});
You can use this workaround:
.ios {
<your-screen> {
.scroll-content {
-webkit-overflow-scrolling: auto !important;
}
}
}
However, This is not recommended because it will disable smooth scroll as well. Read more about it here: https://github.com/ionic-team/ionic/issues/11584
Try this: in config.xml under platform put
<platform name="ios">
[....]
<preference name="webviewbounce" value="false" />
</platform>
I am creating a mobile application with Ionic framework , When i test it with iOS device my status bar turn into white color after the application is fully loaded. I need to change the color from white to black. It works fine with Android Device.
This is the issue
I tried the following methods and nothing works
I made change to my config.xml file which was mentioned in many website as following
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
I further added the statusbar native event handlers under my app.component.ts
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
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();
statusBar.backgroundColorByHexString('#000000');
statusBar.show();
splashScreen.hide();
});
is there a better solution to solve this issue.
The HTML of this project
app.html
<ion-nav [root]="rootPage"></ion-nav>
I am newbee to Kendo UI.
I am using AngularJS and Kendo UI for developing iOS app. How should I avoid overlapping of Stats bar and navigation bar?
Here is How I added navigation bar but it gets overlap with stats bar
<body kendo-mobile-application k-hash-bang="true" ng-app="MobileAppModule" platform="'ios7'">
<kendo-mobile-layout k-id="'default'">
<kendo-mobile-header >
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
</kendo-mobile-layout>
<kendo-mobile-view id="abc" k-title="'Home'" k-layout="'default'">
Hello world
</kendo-mobile-view>
How should I avoid overlapping of Stats bar and navigation bar on iOS 7 and above?
How to set colour of status bar?
I know how to do it using markup language from link: http://www.telerik.com/blogs/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7
Everything you mentioned can be done using the cordova-plugin-statusbar
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
By default a app made with cordova starts at the left bottom corner:
I would prefer that it starts under the status bar on iOS.
I'm using cordova and bootstrap, what I do now is a overrides.css in the folder: merges/ios/css:
.app {
position: fixed;
top: 20px;
}
This works, but I was wondering, is this a good way?
There are multiple ways to solve this. Your solution works fine. But if you would like to have some more control over the behavior and look of the status bar, you should try the Statusbar plugin for Cordova:
$ cordova plugin add org.apache.cordova.statusbar
and then configure the statusbar look in the config.xml file:
<widget ...>
...
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent" />
</widget>
Using phonegap in iOS I have a webview which is resized via Objective-C code.
I've edited the self.webview frame to the 80% of the device screen size, this is working properly.
When I load an html page inside the webview using phonegap, the page is always scrolling even if the page I've loaded is blank (so it's content can't be bigger than the webview size).
How can I set my pages to scroll only if the content size is bigger than the webview size? actually my html pages are always scrolling a bit vertically, like if they're bigger than the webview size and even bigger of the screen size.
I would like to have my htlm pages to scroll only if the real content is bigger than the webview size.
Add the following lines to config.xml:
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
I had the same problem and tried the same (repeated) solution of
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
with NO RESULTS!!!
BUT... I found the solution today!!!
The problem is that we are using the "PAGE" data-role without defining a "CONTENT" data-role. I added it like this:
<div id="myPage" data-role="page">
<div id="myPageContent" data-role="content">
(here all the page!)
</div>
</div>
and worked perfect!
Hope it helps you!