CODEWITHSUNDEEP
jquery-mobilecss-transitions
Sandy
Sandy

Reputation: 14125

jQueryMobile page transition not loading page as it should

I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile. Below is my code.

<a href="index.html" data-transition="slide">Transition</a>

On click of Transition link index.html page should be loaded showing transition effect.

Below is the output of index.html that I am trying to load.

enter image description here

But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.

enter image description here

When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.

I want transition to load index page properly with its all css not to embed it into the page link is called from.

Can you please tell me how to achieve this.

Upvotes: 1

Views: 1240

Answers (2)

matheushf
matheushf

Reputation: 91

Add in your html link tag the following attribute: rel="external"

<a href="index.html" data-transition="slide" rel="external">Transition</a>

Upvotes: 0

Jack
Jack

Reputation: 10993

In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".

Upvotes: 1

Related Questions