页面过渡，更改URL位置时在div中加载新页面

Question

I'm familiar with the Ajax/jQuery .load() or php include() which can be used to load other content into a div on a page.

Kindly take a look at this example I've posted: my site with page transitions

How I've set up this page is, the body is 100% of the screen with no overflow. There is the blue section which is 100% height and the red section which is 100% height positioned 100% from the top. When you click the button the blue div is scaled back and the red div is transitioned to top: 0; .

My problem when you hit the back button, it doesn't go back to the blue section, it goes back to the previous page (blue page).

My question is how can I set this up so the red div (2nd one) will actually change the url (and load another php page into it using include(); or some other method)? For example when you click the button on the blue page, the red page will show up (with the included content) and the url will change to: davidfateh.com/red . I realize hitting the back page won't give me the transition, but at least it will go back to the blue page, which is my goal.

Thanks for looking and for any advice! Cheers!

Answer 1

So basically you show the same page, just different part of it. That is why hitting the back goes to the previous page, not the previous section, which is actually on the same page.

You can do what you want like this:

1. Create 2 different php files. red.php and blue.php
2. In each file have only the part you want.
3. the buttons now have to send from one page to the other. How to do this, depends on how you implemented your existing button.

For example, if the buttons are implemented like forms, use something like this:

<form action="red.php"> in one and <form action="blue.php"> in the other.

By pressing the button it will jump from one page to the other.