So, on my website I'm using THIS METHOD of loading content from a external html file using AJAX. It looks good and all but, what I'm trying to do is add a page transition when the content is changing. Like when you click "home" the page not automatic changes the text in the div but rather slide the current one to the left, out of the screen, and at the same time slide the new content from the right. And I'm not looking for a "one page" solution btw. I know how to make a "fading" effect" but sliding? Thanks for any tips and solutions. And sorry for a noobish question like that...

So, on my website I'm using THIS METHOD of loading content from a external html file using AJAX. It looks good and all but, what I'm trying to do is add a page transition when the content is changing. Like when you click "home" the page not automatic changes the text in the div but rather slide the current one to the left, out of the screen, and at the same time slide the new content from the right. And I'm not looking for a "one page" solution btw. I know how to make a "fading" effect" but sliding? Thanks for any tips and solutions. And sorry for a noobish question like that...

• javascript
• jquery
• html
• css
• ajax

• 1 can you provide your codes? what you have done so far? – thenewseattle Commented Nov 24, 2013 at 22:58

1 Answer 1

Using AJAX XMLHttpRequest() is not a good idea for new devs especially nowadays with how each browser implements their own XMLHttpRequest(). I suggest using jQuery's AJAX Framework $.ajax() or it's shorthand function $.get(). But in your case I would remend .load()which is roughly equivalent to $.get().

Since you didn't include your codes (but you should next time!). Here is a simple example:

HTML:

<ul class="menu">
   <li><a href="home.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="services.html">Services</a></li>
</ul>
<div id="contents">
 <!-- Place the loaded contents here -->
</div>

CSS:

body {overflow-x:hidden;}
.loaded_content_wrapper { 
    overflow:hidden; 
    margin-left:100%; 
    width:100%; 
    position:absolute;
}

JS:

function loadContent(href){
    /* Create the content wrapper and append it to div#contents 
       then load the contents to the wrapper 
    */
    $wrapper = $('<div>'); 
    $wrapper.addClass('loaded_content_wrapper').appendTo('#contents').load(href, function(){
        /* When the content is pletely loaded 
           animate the new content from right to left 
           also the previous content slide to left and remove afterwards.
        */
        $(this).animate({marginLeft:0}, 'slow').prev().animate({marginLeft:'-100%'}, 'slow', function(){
            $(this).remove(); //remove previous content once the animation is plete
        });
    })
}

$('a').click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    loadContent(href)
})