CODEWITHSUNDEEP
jquery-mobilecordova
BaSha
BaSha

Reputation: 2406

Issue with href two separate page with slide animation in mobile jquery

i have two separate pages, index.html and profile.html, and i want to href index.html to profile.html with slide animation so i tried,

   $.mobile.changePage("/profile.html" , { 
     transition: "slideUp", 
     reloadPage: true });

in index.html. i guess this code does not execute or say update head of profile.html and some how reloadPage not working, it is just targeting body tag. is something wrong or how can i reload whole profile page with slide animation?

Upvotes: 0

Views: 129

Answers (1)

frequent
frequent

Reputation: 28523

you are not loading a page "with slide animation". The slide animation is a CSS effect you can add to any div element you want by adding the class(es) JQM is using (try slide in).

So when JQM is loading a page it fetches the content of the first <div data-role="page"> it finds on the page and "throws away" everything else.

The new "page" is then positioned using CSS depending on the transition you set, so normally pos:absolute; top:0; right: screen-width. Then the classes are added and the page slides in.

Since JQM does not parse anything outside of the page, your profile <head> is disregarded. To fix, all scripts should be available on all pages, because you never know where the user starts and you need to make sure everything you need is on board.

Upvotes: 1

Related Questions