jquery, animating dynamic page load

I want to achieve something like that:

1. Click on a link in navbar
2. fadeOut part of site,
3. load page from link
4. animate wrap to match new site height
5. fadeIn new content.

I found a neat solution (here) for this, but my site is build in different way.

My index.php :

<?php 
include ('includes/header.php');
echo '<div id="wrapper">';

if ($_GET['page'] == 'about' ){
    include 'includes/navbar.php';
    include 'includes/about.php';
}else if ($_GET['page'] == 'login' ){
    include 'includes/navbar.php';
    include 'includes/login.php';
}else if ($_GET['page'] == 'register' ){
    include 'includes/navbar.php';
    include 'includes/register.php';
}else if ($_GET['page'] == 'member-index'){
    include 'includes/navbar.php';
    include 'includes/member-index.php';
}else if ($_GET['page'] == 'login-failed'){
    include 'includes/navbar.php';
    include 'includes/login-failed.php';
}else if ($_GET['page'] == 'logout'){
    include 'includes/logout-exec.php';
    include 'includes/navbar.php';
    include 'includes/logout.php';
}else if ($_GET['page'] == 'register-success'){
    include ('includes/navbar.php');
    include 'includes/register-success.php';
}else if ($_GET['page'] == 'access-denied'){
    include 'includes/navbar.php';
    include 'includes/access-denied.php';
}else {
    include ('includes/navbar.php');
    include 'includes/home.php';
}

echo '</div>';
include ('includes/footer.php');
?>

i reload navbar because it's changed in case if session is present.

navbar.php

    <?php   
    //Start session
    session_start();
?>

<div id="navbar">
    <div class="button"><a href="index.php">Home</a></div>
    <?php 
        //Check whether the session variable SESS_MEMBER_ID is present or not
    if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) {
        echo '<div class="button"><a href="index.php?page=login">Login</a></div>';
        echo '<div class="button"><a href="index.php?page=register">Register</a></div>';
    } else {
        echo '<div class="button"><a href="index.php?page=logout">Logout</a></div>';
    }
    ?>

    <div class="button"><a href="index.php?page=member-index">Member</a></div>
    <div class="button"><a href="index.php?page=about">About</a></div>  
</div>

Every page i want to load contains div in which i wrap all other page elements, eg. about.php:

<div id="mainbody"开发者_开发百科>
    <h1>*.php</h1>
</div>

I want to achieve effect described @ start of this post with the site build the way it is build now. In that example i mentioned, dynamic content is loaded by using .load() class. Maybe i should build my site in different way, dunno im still php/jquery newb.

---

Theres a lot here, i'll try to point you in the right direction.

If we take it a step at a time we'll start with the navigation eventListner.

$('#navbar div.button a').click(function(){

});

Then you probably want to get the name of the area/page that was clicked

$('#navbar div.button a').click(function(){
   var pageName = $(this).attr('href').replace('index.php?page=','') // get name
});

Then you probably want to grab the remove the old content then append the new one to the area. Assuming all the pages are already loaded in a hidden dive somewhere, try this.

$('#navbar div.button a').click(function(){
       var pageName = $(this).attr('href').replace('index.php?page=','') // get name

       var newContent = $('#'+ pageName).html();
       $('#mainbody div#currentPageWrapper').fadeOut(function(){
        $(this).empty();
       }); //clear old content

       $('#mainbody div#currentPageWrapper').append(newContent).fadeIn();

    });

To get the pages dynamically you can make an ajax call like so (more on $.get() here

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

So in the example you're looking at something like this

$('#navbar div.button a').click(function(){
           var pageName = $(this).attr('href').replace('index.php?page=','') // get name

           //var newContent = $('#'+ pageName).html(); //get preloaded

$.get(pageName + '.php', function(data) {
     $('#mainbody div#currentPageWrapper').fadeOut(function(){
            $(this).empty();
           }); //clear old content

           $('#mainbody div#currentPageWrapper').append(data).fadeIn();


});




    });