Question

Basically I want to replicate the page changing effect found here, at http://timvandamme.com/

But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible… but still have this nice effect.

So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"

In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).

I know how to code the scrolling bits, it’s just literally the ajax loading includes / page navigation parts I’m struggling to work out :\

Any help would be MUCH appreciated! Thanks in advance.

Answer 1

Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).

<a href="/next-page/">Foo</a>
<script>$("a").click(function(event){
    event.preventDefault();
    navigate($(this).attr('href'));
});</script>

Use the onClick function of the links to change the page’s content with AJAX (just like it appears on the site you linked), but additionally set up each “page” (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.