ajax and jquery to load content

Question

http://www.yensdesign.com/tutorials/contentajax/ In this tutorial, we see that the content of the page that is loaded by ajax slides up and slides down, but i want the content relating to the old link to slide up and content of new link to slide down.. could you please tell how to do that..

Thank you, Raj

Answer 1

You need to put the code that loads the page in the callback of the slide up event. This will ensure the page is loaded after the slideUp is completed.

For each of the button presses, the code on the given site should be changed from :

content.slideUp();
content.load("sections.html #section_news", hideLoading);
content.slideDown();

To:

content.slideUp('slow', function() { 
    content.load("sections.html #section_news", hideLoading);
    content.slideDown();
}

Also,

If you are going to design a site that uses jQuery to update its main content pages like this, you may want to look into using a jQuery plugin like BBQ which will add each click to the browsers history so the user will still be able to use the back button that they are used to.

The back button is by far the most pressed button / link that is used on the web. Dont disable this for them! ;-)