CODEWITHSUNDEEP
jqueryhtmlmobilejquery-mobiletransition
anurag
anurag

Reputation: 35

jQuery mobile page transition

I am using jQuery mobile page transition feature in my application (HTML5 Mobile App) with:

<a href="test.html" data-transition="slide">abc</a>

Page transition works fine (the slide animation) with: 

<a onclick="document.location.href = 'test.html';" data-transition="slide">abc</a>

Page transition doesn't works, it just navigates it doesn't slide.

I want page transition to work with the second option.
Please help

Upvotes: 0

Views: 11626

Answers (4)

NiRUS
NiRUS

Reputation: 4269

add the attribute 

rel="external"

documentation link

this will allow to load external page

Upvotes: 0

user235273
user235273

Reputation:

The reason is that in the first case, JQM does the page change. In the second case, you manually change the page by changing the location. The pages that gets changed by jquery using ajax gets the page transition.
To change transition to slide you can configure default settings $.mobile.defaultPageTransition = "slide";.
Use $.mobile.changePage() function to change pages. changePage() function will do the page transitions for you.

<!-- html -->
<a class="testLink" data-transition="slide">abc</a>

//js 

$(document).off('pagechange');
$(document).on('pagechange', function (e, ui) {
    // generally written in pagechange event.
    $('.testLink').off();
    $('.testLink').on('click', function (e) {
        $.mobile.changePage('test.html', {
            changeHash: true,
            dataUrl: "test",    //the url fragment that will be displayed for the test.html page
            transition: "slide"  //if not specified used the default one or the one defined in the default settings
        });
    });
});

Upvotes: 4

BenM
BenM

Reputation: 53246

This is likely due to the fact that jQuery Mobile uses the preventDefault() method when following links to enable page transitions. Since you're using onclick, this isn't the default action for the element, but a bind for theclick event.

Essentially, the browser is being redirected before jQuery has a chance to intercept it and animate...

As @Th0mdike has said though, you get exactly the same result from both options, and given that you can dynamically change the href attribute of the anchor with $('a').attr('href', 'new.html'), I don't see any benefits for doing the latter....

Upvotes: 0

Gabriele Romanato
Gabriele Romanato

Reputation: 71

The document object has no location property, whereas the window object has. Reference: document object

Upvotes: 0

Related Questions