I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.
$.mobile.changePage("#foo", {
transition:"slide"
});
When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.
I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.
Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.
Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.
Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.
Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.
Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.
For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"
Example:
<div data-role="page" >
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
<a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
</div>
</div>
jsFiddle:
http://jsfiddle.net/GEDcF/
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
UPDATE
From your comment
"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Quote:
Properties:
reverse (boolean, default: false) Decides what direction the transition will run when showing the page.
Found it.
One of our developers turned off all return transitions globally, so no wonder that it didn't work.
This is what he used. Removing that line did the trick.
$.mobile.changePage.defaults.transition = "none";
Related
So I have a two elements that are rendered inside an ng-repeat, when I click a button that does a toggle, for a brief second both elements get shown.
I have tried various things, ngIf, ngShow, ngSwitch and ngCloak and nothing seems to work.
Here is a code sample:
<div data-ng-repeat="item in view.myModel.items">
<div class="row">
<a ng-hide="item.link" class="btn ng-cloak"
ng-click="view.getLink($index)">Get Link</a>
<a ng-show="item.link" class="btn ng-cloak"
data-ng-href="{{item.link}}" download>Download</a>
</div>
</div>
So here is the problem, on load I only see the 'Get Link' button which is fine.
As soon as I click it, it makes a http call and sets the 'items.link' value, which is where the problem happens. At that moment both buttons are shown together.
Then correctly just the download button shows.
Here is the http call if your interested:
/**
* Get a link
*/
function getLink(idx) {
Linker
.getLink(idx)
.then(onGotLink);
function onGotLink(link) {
myModel.items[idx].link = link.url;
}
}
Any ideas?
So credit to user1620220 who pointed it out. The issue is ng-animate is running that is causing the ng-hide-animate to trigger causing that slight flicker.
You can turn off ng-animate, or use CSS to turn of 'transition' if you only want to partially disable it is.
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
BACKGROUND
I am writing an MVC 4 / jQuery Mobile site. I have a Header.cshtml shared view defined like this:
#model string
<div data-role="header" data-position="fixed">
<a data-rel="back" href="javascript:history.back()">Go back</a>
<h1>#Model</h1>
#Html.ActionLink("Home", "Index", "Home", null, new
{
data_icon = "home",
#class = "ui-btn-right jqm-home"
})
</div>
which I call like this:
#Html.Partial("Header", "Registration")
PROBLEM
The above runs fine in my desktop browser, but when I test using Mobilizer (http://www.springbox.com/about/tools/), it seems that history.back() does not work on mobiles. So then I thought.. okay, there's always more than 1 way to get things done.. so I tried this:
<a data-rel="back" href="#Request.UrlReferrer">Go back</a>
Strangely, that doesn't work either and I don't know why. I am guessing that UrlReferrer is calling something in the browser and the mobile browser does not support it. Unfortunately, I cannot actually test that theory as Mobilizer does not seem to let me inspect the page source.
In any case, I need a solution.. of course I could stop using this generic shared view and copy-paste it to everywhere instead, but needless to say that would suck... Can anyone tell me how to solve this one, so I can re-use my header code?
EDIT
At first I thought #DWolf had solved the problem. But now I see it hasn't.
I have checked and confirmed that Mobilizer is not the problem. I did this by testing a different emulator. In this case, ElectricPlum's iPhone simulator:
http://www.hanselman.com/blog/SimulatingAnIPhoneOrIPadBrowserForASPNETMobileWebDevelopmentWithWebMatrix2OrVisualStudio2012.aspx
So, data-add-back-btn="true" also does not work. It does seem odd though that a built-in function of jQuery Mobile for back buttons does not work... What is that?!?!? HELP!
jquery mobile keeps the page cached, so if you flip from page 1 to page 2, it shows page 2, but it keeps on to page 1 behind the scenes
if you add
data-add-back-btn="true"
to your page
<div data-role="page" id="page2" data-add-back-btn="true" >
it will go back 1 page
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/