Question

Right, so I’m deciding to set myself a challenge as a form of learning curve. I’ve never used ajax before, but I feel it’s something I really must learn, so what better chance to do it than on a new portfolio site.

The main concept of the website involves the content of the website sliding behind folds on the edges of the 960, so you would click on a link and the current content all slides out into the fold it is hidden partially under, the folds would then adjust size to match the new content blocks, and the new content slides in from under the folds. I have this done in a simply manner for the news so far simply using the WordPress loop and some basic jquery. (still can’t manage to get the fold to adjust it’s height properly before the new content coms in)

I have this (http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html) as a basis to start with, but it doesn’t appear to quite achieve my intended goal.

Save setting up some silly jsfiddle, here’s the site as it stands http://paradoxdevelopment.org/

EDIT: Sorry got distracted explaining and forgot to ask the exact question:

How can I make it so that when you click on an internal link, it causes this chain of events:

Content box slides out-> Content changes -> Fold grows -> Content box slides in with new content

EDIT 2: I realised I didn’t really make myself clear again. I have managed to get my head round the ajax to load in the content, the problem is the content loads up in different ways for different pages. For Examples:

The home page has 3 recent sites slide down from a vertical fold at the top, a news post which slides in from the left, and the list of news posts which slide in from the right.

The Work/Play pages have a vertical fold at the top from which blocks slide down.

Contact is a simple full width, so fold on either side filling the 960. The same for the about page for now, although this may have a sidebar in future.

How can I make it so the AJAX can detect what is currently loaded so it knows how to react?

Thank you for any and all help in advance!

Answer 1

Well you’ve pretty much outlined for yourself what you need to do so I’ll provide an untested outline for how to get something like that working.

 function animateInDone () {
      // do something here
 }

 function foldReady () {
      // fold has been scaled for this content let's show it on screen
      $('#contentBox').animate(
           {'left':'100px'},
           400,
           'swing',
           complete: animateInDone
      );
 }

 function contentLoadDone (responseText, textStatus, XMLHTTPStatus) {
      // new content loaded and displayed on div since we used .load()
      if (textStatus == 'success') {
           // change the fold size
           $('#fold').animate(
                {height:'350px'}, // or the new height of the contentBox or something else
                // this can also be {height:'+50px'}
                400, 
                'swing', 
                foldReady
           );
      } else {
           // handle errors
      }
 }

 function animateOutDone () {
      // load the new content by using .load or .ajax
      $('#contentBox').load(
           'newcontent.html',
           complete:contentLoadDone
      );
 }

 function contentChange () {
      // animate the content box out
      $('#contentBox').animate(
           {'left':window.innerWidth},
           400,
           'swing',
           complete: animateOutDone
      );
 }

I’m not sure about the exact syntax for .animate call but you’ll be able to figure all the possible options for it from the related docs

• http://api.jquery.com/animate/
• http://api.jquery.com/load/
• http://api.jquery.com/ajax/

Addition to EDIT 2:
You’ll need to store the state of the UI some where. This can be as simple as having a variable that just stores the name of the current page, or you could have a class hierarchy where each page has their own class with a different UI in/out animation.

var pageHome = function () {
    this.animIn = function () {
       // animate home page in
    }

    this.animOut = function (newpage) {
       // animate home page out and set newpage.animIn as the callback for when the animation in done
    }
}

var pageNow = pageHome;
pageNow.animIn();

I personally love having function objects.