So what im trying to achieve is, applying any page transition when manually creating a page change.
so for example, say that on my webpage, i make it so that when the user swipes right, the website goes to a second page....like so
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage');
});
now i want to attach a page transition to this function. if it was on an actual link, then one would apply a data-transition but since this page change is being manually created, im wondering how to append a transition to it.
i tried for example
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
etc but to no avail, Any ideas how i would put this into effect?
Thanks in advanced.
You've almost got it, you just need to declare the second paramater of the function (your options) within the {} parenthesis:
$('#firstPage').bind("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage( "#secondPage", { transition: "flip"} );
});
Try replacing bind with on:
$('#firstPage').on("swiperight", function(){
//alert("swiped right on the body element");
$.mobile.changePage('#secondPage','flip');
});
I had the similar problem and this worked for me.
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
I have an annoying issue, I want to reload the page I am on programmatically, whilst maintaining a page transition, but I don't want to double it up in the DOM!
Can you post your relevant code? What function do you use?
You are aware of the properties of changePage?
$.mobile.changePage("#pageId", { allowSamePageTransition : true, reloadPage: true } );
Otherwise you can always remove the previous page yourself
$('#pageId').live('pageshow',function(event, ui){
$(ui.prevPage).remove();
});
I'm adding pages run time when swipeleft is happened. But when swiperight happened I can't return the previous page that I'm created with sliding from left to right.
I have added the data-direction="reverse" to the pages but it didn't create left-to-right effect.
Is there any way to do this?
A maybe easier way using JQM would be:
Link Text
or also, within js as:
$.mobile.changePage("page.html", { transition: 'slide', reverse: true });
function ChangePage(pageId,iPageIndex) {
var forward = iCurrCardIndex < iPageIndex;
iCurrCardIndex = iPageIndex;
$.mobile.changePage("#" + pageId, "slide", !forward, true);
}
data-direction="reverse" does not belong on the page, you add it to the link:
Link Text
will send you to page.html with a reverse transition.
By using data-rel="back" jQuery Mobile will mimic the back button, see "Back linking" here:
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html
Next page
I have an image that opens the jQuery UI Slider div on click and allows users to set a value by dragging the handle. What I'm trying to do now is hide that handle when the user clicks anywhere else on the page, but the regular .blur event doesn't seem to work.
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").show();
$("#slider-vertical").focus();
});
$("#slider-vertical").blur(function () {
$("#slider-vertical").hide();
});
Probably you will have a better luck on defining global onclick handler and there you need to check if source of event is not your slider. If not - do your magic.
Basically - if you spinner doesn't include element such as text field or link it will not support focus/blur
Ok, this is what I have put together to make this work.
Thanx DroidIn.net for your help.
$(document).bind("click", function(e){
if(e.target.id != "openPriceToSliderGif")
$("#slider-vertical").hide();
return false;
});
$("#openPriceToSliderGif").click(function(){
$("#slider-vertical").toggle();
});