How can I avoid the blank white screen appearing between the phonegap splashscreen and webview loading stage in iOS.I have followed the suggested solutions..like
[1]: http://docs.phonegap.com/en/2.5.0/cordova_splashscreen_splashscreen.md.html#Splashscreen,and other but still the white screen persists even after setting time delay.
I'm loading a external mobile website inside my local index.html file using window.location.href.
Thanks
Try removing page transitions, This helped me to some extent, and use latest phonegap. Use the following code before including jquery mobile library.
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition="none"
});
Edit: Oops, it was between splash screen and the first screen. Try this
link
Related
I am using ionic to develop web app. In the app, after logging in, it redirects to a page containing ion-slides, but the transition is not smooth, it will stuck with a part of former page(the logging in page) still in screen, when I click the screen(maybe focus??) , the transition can be completed and the latter page will be in the screen totally.
<ion-content scroll="false" class="myevents-content" ng-show="isCardViewer" ng-animate="'animate'">
<ion-slides options="options" slider="$parent.slider" class="myevents-content-slider">
So is the problem related to the animation?? And any idea to solve it?
THX.
The best way to solve transition animation is to use this plugin
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
https://github.com/shprink/ionic-native-transitions
Do not forget to add all the JS file after you install the plugin in yor index.html. It will work on on devices.
i have a serie of galleries using Galleria IO plugin over JQuery using Zk Framework i load the galleries when i enter fullscreen mode everything is smoothly the problem arises when i reload the galleria using the same code when i load the galleria the first time. and when i click on the galleria the galleria enters in fullscreen mode but the size of the galleria is the same in the normal view and the sizes of the images is the same as the normal view this issue is in Chrome in Mozilla works perfect...
here is the code i am using to enter full screen mode..
Galleria.run('#galleriaID',{extend:function()
{
var gallery=this;gallery.attachKeyboard({left:gallery.prev,right:gallery.next,});
$('#fullScreenMode').click(function(event)
{
event.preventDefault();
gallery.enterFullscreen();
});
}});
i hope somebody can help me
try:
Galleria.configure({trueFullscreen:false});
Galleria.ready(function(){this.enterFullscreen();});
Hello I'm creating a simple mobile app using Appgyver - steroids.
I'm new with this framework I'm trying to find a way to hide the loading screen between different pages in both Android and iOS. I have read their documentation but I can't make it work.
Based on this: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.layers_layers.push.md.html#steroids.layers.push
I 've set keepLoading: false on a view push which didnt work
also after the view push I called:
steroids.view.removeLoading();
as mentioned here: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.view_view.removeLoading.md.html#steroids.view.removeLoading
Nothing removed the black loading transition screen between pages.
Could someone please tell me what I'm doing wrong?
It could be documented better, but if you remove/rename the www/loading.html (for iOS) and www/loading.png (for Android) files in your project, then steroids.layers.push() will not show the loading screen (also means that the push animation will not start until after the WebView has loaded, which can take some time and lead to unresponsive feeling).
I have a jQuery Mobile PhoneGap app that loads all of my pages fine, except for then my app starts up.
The application shows a screen that says Phone gap IPhone non-retina and then shows all of the pages I have created on one screen before my application starts. I load the stylesheets scripts and html body dynamically in a java script file.
Is this a problem that would be occurring on my end, phone gaps end, or JQM end? I will supply code if need be.
I am using JQM 1.2.0 JQuery 1.8 and JQM 1.2.0 css
The flicker happens between the splash page and my first page load.I use this javascript to load the pages into my index.html
javascript:
$("body").load(remoteURL + "body.html?v="+getTimeStamp(),function()
{
loadPage();
}
It take some time, for all scripts to load and your page to set up. You can go to the Phonegap.plist and disable the AutoHideSplashScreen and hide the splash screen from javascript, once the page is fully loaded with:
navigator.splashscreen.hide();
This fixed the problem for me.
Issue
I have a strange issue with jQuery Mobile wrapped in Phonegap on iOS. My app consists of two pages, the second page being AJAX-loaded. On both pages I have images with a relative source like this
<img src="../images/myImage.png" />
On the first page, the image is displayed correctly. On the second page, the image is not found.
Explanation
I checked the src of both images with Weinre. It seems like Phonegap uses the data-url of the jQuery Mobile page div as prefix to the relative source. This works on page 1
file://path/to/app/html/../images/myImage.png
but not on page 2
file://path/to/app/html/page2../images/myImage.png
Why does Phonegap use the data-url on iOS?
Environment
What confuses me is that this problem only occurs in iOS Phonegap. It works fine in any browser and in Android Phonegap. It is a very basic "Hello World" like app with a standard jQuery Mobile page.
Solutions
I tried using the base tag, didn't work. I tried setting up the project again from scratch, didn't work. Any ideas?
I found the answer myself. Apparently jQuery Mobile identifies linked resources as external, if they don't have a file name suffix like ".html". My files were named without any suffixes.