CODEWITHSUNDEEP
javascriptjquerymobiletransitionswipe
Deproblemify
Deproblemify

Reputation: 3430

Call JQuery Mobile transition with Javascript

I am using Hammer.js to add a swipe gesture to swipe through the pages of my website.

Now I want to add an transition using JQuery Mobile but the transition are called in HTML. Is there a possibility to call the animation:

data-transition="slide"

via Javascript.

<script type="text/javascript">
var hammertime = Hammer('html', {swipe_max_touches: 2, prevent_mouseevents: true
}).on("swiperight", function(event) {
document.location = "http://example.com";
});

Upvotes: 0

Views: 3972

Answers (2)

geoyws
geoyws

Reputation: 3687

$.mobile.changePage() is deprecated now. http://api.jquerymobile.com/jQuery.mobile.changePage/. The proper way would be to use:

  1. $.mobile.navigate("#bar", {transition: "slide", info: "info about the #bar hash"});
  2. $.mobile.pageContainer.pagecontainer("change", "target", {transition: "flow", changeHash: false, reload: true})

Just thought I'd answer this question from what I've learnt from the other threads. I don't have enough reputation to put up the rest of the links. Just search the code up on Google to find their respective StackOverflow threads.

Upvotes: 3

Peter
Peter

Reputation: 4701

You can use

$.mobile.changePage( url, { transition: "slideup" });

See jQueryMobile documentation

To improve the load times you can use prefetching e.g.

<a href="url" data-prefetch="true" data-rel="dialog" class="ui-link">
  This link will prefetch the page
</a>

Upvotes: 1

Related Questions