Since I have upgraded jQuery Mobile to 1.3 and PhoneGap to 2.5, I have a problem for page changing in my iOS application.
When I click to a link, for a few milliseconds, I see a "no page" state. It's not a white screen, but the background of my "body" element.
I have made some researches on the web, but it looks like no tricks work for me. Most of them tell to disable transition of jQM. But it is already the case for me.
I have tracked jQM event to see what happens, and apparently when I use the method changePage(), it hides the current page, and then show the final page. And during these two methods, I can see this "no page" state, with my body background.
So it is not the flickering navigation that occurs during transition (because I disabled transition), it's something else.
Anyone would have a suggestion to fix this annoying problem (I cannot post image with my reputation)?
This issue has some suggestions on changing the $.mobile.defaultTransitionHandler to use the simultaneousHandler instead of the default sequentialHandler.
https://github.com/jquery/jquery-mobile/issues/4024
This has improved page transition speed in my application (with $.mobile.defaultPageTransition set to 'none'), but I am still dealing with occasional white flashes.
Related
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
i'm developing a simple three tabs app for Android and iPhone, using IBM Worklight as framework. Every tab links to a div with data-role="page", as jQuery Mobile specifications.
If I implement the jquery fixed persistent tabbar like is explained there (http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html), i'm encountering some flickering on the tab item in page transition (with any transiction effect).
If I set the default transition to "none", I could resolve this problem, but I lost the transiction native-like effect.
This behavior appears only if i test the App with a real android device (Xperia Neo, GS2).
If i navigate trough the pages of http://jquerymobile.com/demos/1.2.0/ with my smartphone, especially here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-d.html i can't see the strange behavior, but the footer won't be persistent trough the pages, it just re-render like the whole content and this is worse (this happen with the stock browser or Dolphin, instead looks very well by using Chrome).
Is there a way to improve this effect or there is another way to implement fixed persistent tab bar?
I used as reference the default Android Contacts App.
Maybe you're getting this flicker because you're navigating between pages using rel="external". Try to pass from one page to the other without ajax and you'll see that flickering will dissapear
The problem is due to poor performance of the WebView of the Android environment in rendering 3d transition.
Solved by removing the transition effect with:
$.mobile.defaultPageTransition = "none";
Something else that could help is putting these attributes in the AndroidManifest.xml:
<supports-screens
android:anyDensity="true"
android:largeScreens="false"
android:normalScreens="true"
android:smallScreens="false"
android:xlargeScreens="false" />
<application
android:debuggable="false"
android:hardwareAccelerated="true"/>
I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.
I am using the new BrowserField2 in BlackBerry OS5 to display HTML content in my app. There are 3 options available for navigation through links in that content.
CURSOR navigation uses a block cursor and actually moves through the characters of the page. Not very useful for me.
POINTER navigation uses a mouse like pointer that you move around the screen and hover over elements. This could work but there is a bug however in that the browser field captures navigation and never lets go so this mode is effectively broken if you share a screen with any other managers. Once your focus enters the browser field you cannot move focus back out and into neighboring fields. RIM has acknowledged the bug but has no work around.
NONE which is for custom navigation but they offer no explanation as to how you would do this.
What I ideally want is to simply have trackpad movements move the focus through the links and highlight them. Then a click would activate the link. I assume I would select the NONE option above and implement my own focus navigation but I am not clear how this can be accomplished with the new APIs.
Is anyone familiar with the new browser2 component could give some guidance?
Thanks!
There's a workaroudn to getting back the focus out of the BrowserField using the NAVIGATION_POINTER.
I found it in this thread:
http://supportforums.blackberry.com/t5/Java-Development/BrowserField-2-Navigation-Mode/td-p/632172
"farahh" posted this:
I found out a hack..
with the navigation set to pointer mode, a click outside the browserfield manager invokes Manager.invokeAction(int). I used the getFieldWithFocus to verify which field has focus and then switch the focus to something else.
Cheers.
Nahuel
PD: i havent found out how to get the behaviour you want, i need that as well so if you got it working please let me know, its kinda urgent in my project =(
I actually reverted back to the older browser1 (OS4) component because the navigation problems in browserField2 (OS5) were a deal breaker for me. Luckily the OS4 browser does everything I need in terms of functionality and it has the exact navigation behavior I need and there are no focus problems mixing it with other views.