0

I have tried to implement this kind of script (Page Transition): here

Everything is going fine as demo provided. But only 1 problem that I cant figure out is:

I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.

Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.

Can somebody give me a clue to solve this? What I have tried is using :

location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(

*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.

Please help & Many Thanks

for demo purpose and needs help : here

Safrul
  • 77
  • 1
  • 8

1 Answers1

1

It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.

From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.

I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.

hndr
  • 757
  • 13
  • 29
  • Yerrpp.. I agree with you @that_guy. That script is provided callback method which is we can put 'loaded' script there. But like you said, it will executed the 'loaded' on first page. So, my objective is to make page transition then after transition page is done (bring to second HTML page) it will load whatever scripts that second page have. I have no idea how to solve this kind of puzzle.. :( – Safrul Jul 12 '13 at 13:22
  • From what I see, the only function you passed is an empty function called `onTransitionFinished`, of course it doesn't do anything. – hndr Jul 12 '13 at 13:30
  • Haha... I make it empty because of I don't know what else to put in. Tried so many time to load external JS on second page after page transition done. In the end I make it empty for anyone to test it out. :) – Safrul Jul 12 '13 at 13:55
  • With the method you use now, there is now way to execute the Javascript "onload", because the page is never loaded. You are basically still on the first page, and so, you need to put the scripts there as well. What you can do is maybe try to extract the script from the second page and run `eval` on it. More here: http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file I also noticed there is a bug on the library that you use. On chrome, the callback is also called on the first page load. – hndr Jul 12 '13 at 20:37