Question

I have tried the following code in single.php file in wordpress. I used these chunk of code displaying related posts of current post.

 <ul class="step-nav clearfix">
<li class="prev button">
    <?php echo previous_post_link('%link', 'Previous'); ?>
</li>
<li class="next button">
    <?php echo next_post_link('%link', 'Next'); ?>
</li>
</ul>

It shows next and previous link. Now the problem is that I am not getting any idea of how to write jquery code which will slide all next or previous post wihout changing the url of browser. Please help.

Answer 1

You can use ajax loading to laod the content if you do not want the url to be changed and the new posts slideIn..

Here is a sample code for ajax navigation I am using, you can modify it accordingly.

// Ajaxed navigation On Page
jQuery(document).ready(function(){
    jQuery('#latestvideo-wrapper').append('<div class="video-loader"></div>');
    jQuery('.videosarticle a').live('click', function(e)  {
    jQuery('#latestvideo-wrapper .video-loader').fadeIn(500);
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('#latestvideo-wrapper #latestvideobox').fadeOut(100).load(link + ' #latestvideobox', function() {
    jQuery('#latestvideo-wrapper .video-loader').fadeOut(400);
    jQuery('#latestvideo-wrapper #latestvideobox').fadeIn(500);
     });
    });
});

According to this code the previous content is fading Out and the new content is fading In.