I work on a sample which I want to navigate from page1 to page2 from left to right, so I use data-transition="slide" and data-direction="reverse" in anchor tag. Actually it works fine, however, when I click back button on the browser it should back to page1 from right to left but still it back from left to right.
Although this scenario works fine when I don't use data-direction="reverse" it go to page2 and back to page1 correctly.
How I can I fix that? Am I doing something wrong?
Thanks in advance.
Related
The anchor tags I have in the nav bar work fine on the home page, but if you click on one from another page, it will go to the correct spot only to jump down when the slider loads.
Is there some kind of fix for this problem?
This is the site:
http://www.nfgraphicdesign.ca/wpdemo
if you navigate from
http://www.nfgraphicdesign.ca/wpdemo/buyers/ and current listings you will see what I mean.
Thanks a lot for any help with this.
When using swipe to slide pages, e.g.
// swipe right event (currentpage is pseudo code)
$("body").pagecontainer("change", "#page" + currentpage - 1, { transition: "slide", reverse: true });
// swipe left event
$("body").pagecontainer("change", "#page" + currentpage + 1, { transition: "slide" });
I get this effect: on swipe right, the current page disappears immediately and the previous page slides in from the left. On swipe left, the current page slides out to the left and then the next page appears immediately.
What I want is that the old page slides out and the new page slides in simultaneously, like in Omar's example: http://jsfiddle.net/Palestinian/L297j/
I tried $.mobile.changePage instead of the newer $("body").pagecontainer("change") but that makes no difference. I made sure that the slide target pages do exist ahead of the slide (the pages are created dynamically) and I also added another call to the page constructor before setting up the swipe.
"flip" transition looks perfectly fine in the same place, probably because there are never two pages visible at the same time? I have no clue and I am hoping that someone knows more "slide" pitfalls.
Sorry it took a while to recreate the problem and the fiddle became rather lengthy:
http://jsfiddle.net/timvdh/eFDLr/7/
I am using a static panel in this example:
<div data-role="panel" id="select-panel" data-position="left" data-display="overlay" data-theme="a" data-bind="jQM: true">
<div data-role="header" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">Optionen</h1>
</div>
</div>
The
data-bind="jQM: true"
binding essentially executes
$("#select-panel").trigger("create");
This has to be done since the static panels (panels outside of pages available for every page) do not get enhanced by jQM otherwise.
However, in this special case everything seems to work fine, but the slide becomes ugly as described in the question.
The simple workaround is the remove
data-role="header"
from the header. You can try it in the fiddle and the slide will work fine.
In jquery mobile when you do transitions to different pages is there a way to have the page its transitioning to show the top of the page? If the current page has a long list and you scroll down, then click to go to another page with the slide transition, then click back to the previous page it shows the middle of the page where you last were. I would like it to actually go back to the top of the page when going back. Is this possible?
Try this on triggering the back button?
http://jquerymobile.com/demos/1.0b3/#/demos/1.0b3/docs/api/methods.html
//scroll to Y 100px
$.mobile.silentScroll(100);
Or on triggering the active page:
if ($("#myPage").is(".ui-page-active")) { ... }
I additionally think this is a feature which is nice, the back button takes you back to the place you have been. You don't have to re-orientate yourself because you get back to the point you were, I think its a nice usability feature.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.
On occasion I need to click a sIFR link in order to "activate" it. I hover over it and nothing happens. I click it, then hover over it and then it works correctly. This seems to mostly happen with items that are not within the viewport when the page renders (items you have to scroll to see). Is there a fix for this?
This tends to be a problem in Firefox when you have a Flash movie with wmode set to transparent or opaque, contained in a floated element. Removing the wmode should resolve the issue.