Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by Lauren Clark
Lauren Clark
33,155 Points

How do I Slide from page to page using PHP & AJAX/jQUERY

I'm trying to get some ideas on how I'm going to do this. I want to grab the next page from a a family of pages and slide to it, I was going to do it by chucking everything in a giant div and then loading all pages at once, but as this is a CMS site, there could be a huge amount of project pages, and there would then be countless images on there to loop through.

So in short.

  • Get next 'Project' page (php) with AJAX
  • Sliding animation from current page to next page
  • Previous and Next buttons to go back and forth
  • Don't want to load ALL project pages at once

I have 0 experience with Ajax, if anyone has done this before or knows a way, or can point me in the right direction?

3 Answers

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

I think you need to have all page-specific content in .html files. When the user requests another page, put the content of that page in a container-div. The ajax methods in jQuery are really making this easy. Simply use jQuery's load method. When the content is loaded into that container, use some kind of animate function to 'slide' to that page.

Lauren Clark
Lauren Clark
33,155 Points

Hmmn this might be okay as the files are on a custom CMS which saves templates as .txt files so I should be able to turn them into .html for this purpose.

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

With jquery's load method, txt files will work well.

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

Boom. Nice one. :)

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

There are a bunch of different ways this could be done. The fastest load would be to load all the page content into 1 page and separate the content out by HTML element IDs.

<a href="#" class="pagenav" for="page-one">Page One</a> <a href="#" class="pagenav" for="page-two">Page Two</a> <a href="#" class="pagenav" for="page-three">Page Three</a> <a href="#" class="pagenav" for="page-four">Page Four</a>

<div id="page-one" class="page"> Page one content goes here </div>

<div id="page-two" class="hide page"> Page two content goes here </div>

<div id="page-three" class="hide page"> Page three content goes here </div>

<div id="page-four" class="hide page"> Page four content goes here </div>

<!-- don't forget to load jquery here --> <script type="text/javascript">

// If any of the "pages jQuery('.pagenav').onclick(function(){

//  Add the hide class to all the page nodes.
jQuery('.page').addClass('hide');

// Get the page we want to show and remove the hide class
jQuery("#" + jQuery(this).attr('for')).removeClass('hide');

// Always return false on links that are defined href="#" to keep
// # out of the overall URL.    
return false;

});

</script>

I haven't actually tested this this was written spur of the moment but you should be able to get the general idea. If you want to slide then you would slide where I am doing the add/remove class code in the javascript.

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

If you are working with a large website, this way isn't always the fastest I think

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Using kinda this system, I've made a demo a while ago. Maybe it can be helpfull. http://web-dfw3qc8i5d.treehouse-app.com/