[graphicsman]

Im looking for a way to prevent page reload with AJAX but im unsure what it is called. My overall goal is to allow someone to hit a tab or navigation button and it change to that page without having to reload. I would also like to figure out how to add animation to it with Jquery or JavaScript. Ideas would be great, thanks

 

[Plex]

You use CSS and templates to setup navigation menus with fluid links. You would use jQuery/AJAX to change values of components on-the-fly. For example, you have a drop-down menu with an onChange() event that calls JS with jQuery. If it's a dynamic request, you could pull it back with AJAX fed with JSON (or AJAX, whatever floats your boat). That comes back and changes the value of another textbox on the page (without reloading). You wouldn't use that for an entire navigation menu.

If I'm understanding what you're asking, anyway.

 

[graphicsman]

i understand the principle of how to do it, im just looking for code snippets and the best functions to use.

 

[Jonowxeno]

Question: Is all the content going to be on one page or does the content reside on different pages?

If you're loading stuff from other pages, here's an example of how to do it. There's nicer ways to do for multiple tabs, but this is the most basic way

Code:

$('#tab1').click(function() { //When tab1 gets clicked
        //Load #container from ajax/test.html into #content div
$('#content').load('ajax/test.html #container');

return false; //Prevents default click function
});

 

[Coma]

scriptaculous for fancy animations

 

[glakr]

Take a look at jQuery UI. There is a tabs widget as well as lots of other good stuff for user interface.
http://jqueryui.com/

It isn't too hard to just add your own click event handlers either and then just load a div with content dynamically using ajax. You would just do something like:

Code:

$('#buttonorlink').click(function() {
  $('#targetdiv').load('directory/stuff.html'); // or .ajax or .get or .post would all work.
});

Hope that gets you pointed in the right direction.