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.
Related
i have created a website using bootstrap css framework, it works as it should be in desktop chrome, firefox, IE browsers. Mobile stock browser works fine too.
but issue is only with Mobile Chrome browser.
On contents page, there are comments, which gets loaded after page loads, something like this in javascript.
$(document).ready(function (){if ($('#loadComments').length ) {reloadComments();}});
function reloadComments(id) {
$('#loadComments').load('/load_comments.php?id='+ id);
}
everything else is working great, but the content which is loaded using .load jquery function , doesnt follow CSS rules.
and only those looks bigger than normal page. even though all other page contents are smaller in size, the loaded contents are very bigger.
how can i fix this ?
update:::
its not just for jquery .load ,
its happening for bootstrap nav nav-tabs
e.g.
http://jsfiddle.net/4g9pw5mo/
if i try to click other nav tabs and then come back to original tabs the font size gets increased,
but its not replicating the issue on jsfiddle.net and mobile chrome.,
so i guess, its have something to do with my CSS.
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).
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
i am trying to develop a web application using a master page on asp.net 4. the application needs to work on an ipad.
i had the site already built, but it loaded so slowly that it timed-out, so i decided to rebuild from scratch to see what might be causing the issue. i put in the least amount of html possible to test, and it loaded in under a second. however, as soon as i added
<script type="text/javascript">
</script>
within the master page head tag the site took close to 10 seconds to load. the same problem occurs if i add a .net control to the content page.
i am using an ipad 3 with javascript turned on.
does anyone have any ideas?
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.