i'm developing hybrid app using JQM + PhoneGap on Android.
when i change the page, i want to show transition effect like slide or slideup etc...
it works fine except Android 2.x version. (i have realized this issue in JQM docs : this is JQM docs)
so i made custom trasition. but it doesn't work fine.
when i change the page with transition effect using my custom transition CSS.
it shows 'blank page' between 'A page' and 'B page'.
this is my code : [http://jsfiddle.net/vanryuji/4DkEv/3/]
how can i delete(?) or hide(?) this page?
Based on the way you are performing the Slide, JQM has this to say:
During a CSS-based page transition, jQuery Mobile will place the class
name of the transition on both the "from" and "to" pages involved in
the transition. It then places an "out" class on the "from" page, and
"in" class on the "to" page. The presence of these classes on the
"from" and "to" page elements then triggers the animation CSS rules
defined above. As of jQuery Mobile version 1.1, animation class
additions are queued, rather than simultaneous, producing an
out-then-in sequence, which is friendlier for mobile rendering than
our previous simultaneous transition sequence.
You will need to bypass the sequntial action or force simultaneous.
Related
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.
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
jQuery mobile 1.2 alpha introduces Popups while it already has a similar widget, called Dialogs. They both seem very similar in nature.
What are the technical differences between Popups and Dialogs?
What Popups can do (any practical usecase as example preferred) that is impossible with Dialogs?
They are quite different beast. Here is my opinion based on my limited experience.
Dialogues
Dialogues take over the page, they contain a fullscreen dark background to make the "dialog" appear to have replaced the page.
Any page can be presented as a dialog by adding the data-rel="dialog" attribute to the page anchor link.
Like pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.
Can be chained.
Popups
Displays within the current page, and are probably more similar to the functionality commonly referred to as modals or lightboxes.
Can't be chained.
Popups are probably more suited for alerts, tooltips, small yes/no ok/cancel messages, making a thumbnail popup into a larger image, small ajax forms(newsletter, login, post a comment) etc. Useful when you don't want to overload the page with information, and only want to reveal certain functionality to users when they need or request it.
Dialogues on the other hand could be used in situations where you need to convey a lot of information (terms and conditions acceptance screen, etc), or when you really want to emphasis an alert, menu, the choice a user has, etc. Dialogues kind of break the flow of a page so should be used more cautiously.
One neat feature of the popups is that they can be used as overlay panels, which could be used to create a menu that slides in from the side of the screen, not too dissimilar to the menu in the Facebooks iphone application.
At the end of the day, either could be used, and neither is right or wrong, a lot of it comes down to personal preference, and how you want your application to flow.
One important difference is Popups appear in the same page as an element, where as dialogue is a different page in all and the background is blank.