Response title
This is preview!
Move this topic
Flickering issue in page navigation in iphone
in jQuery Mobile
•
5 months ago
Hi,
I am using jqm 1.2.0 in my phonegap application. the problem is when i try to navigate to next page, its showing white screen before move to next page. I had discussion with phonegap support about this issue. They said this issue caused by jquery mobile only not by phonegap support.
I am using window.open method for navigation. How to solve this issue?
I am having this problem in iphone device.
Thanks
I am using jqm 1.2.0 in my phonegap application. the problem is when i try to navigate to next page, its showing white screen before move to next page. I had discussion with phonegap support about this issue. They said this issue caused by jquery mobile only not by phonegap support.
I am using window.open method for navigation. How to solve this issue?
I am having this problem in iphone device.
Thanks
1
Replies(8)
Re: Flickering issue in page navigation in iphone
5 months ago
Using window.open? What. Why would you do that. JQuery Mobile has a built in $.mobile.changePage that you should be using.
Leave a comment on haga0054's reply
Re: Flickering issue in page navigation in iphone
5 months ago
thanks for your response..
the changepage method used to change only the content of the page. in our phonegap application we need to load the whole page(script,DOM,and onDeviceReady methods).. these things not getting fire when i use changepage method.. this is working with window.open method
Thanks,
the changepage method used to change only the content of the page. in our phonegap application we need to load the whole page(script,DOM,and onDeviceReady methods).. these things not getting fire when i use changepage method.. this is working with window.open method
Thanks,
Re: Flickering issue in page navigation in iphone
5 months ago
So then my question to you use why even use jquery mobile? If you want your scripts to load you can simply use an href with rel="external".
As for getting help can you post an example, can we see it in action, can you post your code? Hard to help otherwise.
Leave a comment on sktniran's reply
Re: Flickering issue in page navigation in iphone
5 months ago
- this is my sample:<!DOCTYPE HTML>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
//alert(""+navigator.userAgent);
if (navigator.userAgent.indexOf("iPhone") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady()
{
alert("on device ready");
}
function MovetoPrevForm()
{
//alert("previouspage");
/* $.mobile.changePage("spec.html",
{
transition: "pop"
});*/
window.open("main.html");
}
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
header</div>
<div data-role="content">
<input type="button" value="PreviousForm" onClick="MovetoPrevForm()"/>
<a href="main.html" rel="external">nextpage</a>
</div>
<div data-role="footer">
Footer</div>
</div>
</body>
</html>
i did like you mentioned... i added a href tag with rel="external".. now all my script getting load.. but the flickering issue came again here...
thank you so much
Re: Flickering issue in page navigation in iphone
5 months ago
So when does the flickering occur? If you use rel=external it should load without transition. Are there other scripts that could be the potential culprit here? What page is your main.htm?
Leave a comment on sktniran's reply
Re: Flickering issue in page navigation in iphone
5 months ago
I am having main.html locally.. i think the problem is when loading page with script it takes few seconds to load, so in that time its showing white screen like this..
window.open and a href with rel=external these two methods loading with script, here i m facing flickering issue..
a href without rel=external here i m not facing flickering issue but script not loading
window.open and a href with rel=external these two methods loading with script, here i m facing flickering issue..
a href without rel=external here i m not facing flickering issue but script not loading
Re: Flickering issue in page navigation in iphone
5 months ago
If you are going to use JQuery Mobile you really shouldn't use rel="external" or window.open. It defeats one of the core functions of JQuery Mobile. Instead you should read about scripting in JQuery Mobile.
You can have all the scripts load on the proper page if you do it correctly. I think that is the issue here, not the flickering. If it's flickering and you are using rel="external" then it's not a JQuery Mobile issue unless you have scripting errors.
Leave a comment on sktniran's reply
Re: Flickering issue in page navigation in iphone
5 months ago
Yes, if you use either rel="external" or window.open, then the page is going to take quite some time to load. This is because it is loading and initializing JQM all over again. That is why, if you feel you need to do this, I would advise that you find some solution other than jQuery Mobile, because it is not going to be a good user experience.
You do not need to to this to use JQM with PhoneGap. I assure you there are hundreds to thousands of PhoneGap apps successfully using JQM and they don't have to do this. You just have to read the docs and learn how to use JQM correctly. You need to learn at least the basics, such as the correct document structure. It's apparent from your code above that you haven't done that.
- You're loading you CSS in the wrong place. You need to load the JQM CSS before you load jquery.mobile.js.
- You're not setting JQM defaults in the right place. See the docs. (I'm tired of repeating basics here in the forum over and over...)
You've only shown us one page, so impossible to tell what the real problem is. I'm guessing, though, that it has to do with document structure. The content of <head> should be identical on every page. If you have scripts specific to a page, you need to put them inside the page <div>. JQM only loads scripts from the <head> of the first page loaded. They are ignored on all other pages. SEE THE DOCS!
(For PhoneGap, actually, you can omit the content of <head> completely on all pages other than the first. The purpose for repeating <head> content on all pages is so that - on a web site - the user can bookmark pages and enter the site from any page.)
You do not need to to this to use JQM with PhoneGap. I assure you there are hundreds to thousands of PhoneGap apps successfully using JQM and they don't have to do this. You just have to read the docs and learn how to use JQM correctly. You need to learn at least the basics, such as the correct document structure. It's apparent from your code above that you haven't done that.
- You're loading you CSS in the wrong place. You need to load the JQM CSS before you load jquery.mobile.js.
- You're not setting JQM defaults in the right place. See the docs. (I'm tired of repeating basics here in the forum over and over...)
You've only shown us one page, so impossible to tell what the real problem is. I'm guessing, though, that it has to do with document structure. The content of <head> should be identical on every page. If you have scripts specific to a page, you need to put them inside the page <div>. JQM only loads scripts from the <head> of the first page loaded. They are ignored on all other pages. SEE THE DOCS!
(For PhoneGap, actually, you can omit the content of <head> completely on all pages other than the first. The purpose for repeating <head> content on all pages is so that - on a web site - the user can bookmark pages and enter the site from any page.)
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to sktniran's problem
Statistics
- 8 Replies
- 443 Views
- 0 Followers
