Page Transition

by patelsan

HTML

easy ajax-ready jquery slider<br />
by [email protected] ...<br />
(with thanks to Jamie on stackoverflow)
<br clear="all" /><br /><br />

<div class="arrow_L"><a href="#" onclick="return false">PREV</a></div>
<div class="arrow_R"><a href="#" onclick="return false">NEXT</a></div>

<div id="article_columns_box">
    <div id="article_columns"> 
        
        <div class="column off_left" id="1">&nbsp;</div>
        <div class="column on_screen" id="2">Here's the onload data</div>
        <div class="column off_right" id="3">&nbsp;</div>

    </div>
</div>

CSS

#article_columns_box {
        position: absolute;
        left: 100px;
        width: 200px;
        overflow: hidden;
        }
    
    #article_columns {
        position: relative;
        width: 600px;
        margin-left: -200px;
        }
    #article_columns .column {
        position: relative;
        float: left;
        width: 200px;
        background: #aaf;
        display: block;
        }

    .arrow_L,
    .arrow_R {
        position: absolute;
        width: 32px;
        height: 48px;
        background: url(http://i53.tinypic.com/kdwz6u.png) left top no-repeat;
        left: 48px;
        }
    .arrow_R {
        background-position: right top;
        left: 320px;
        }
    .arrow_L a,
    .arrow_R a {
        display: block;
        width: 32px;
        height: 48px;
        text-indent: -100000px;
        cursor: pointer;
        }

JavaScript

$('.arrow_L').live('click', function(){
    var current_id = $('.on_screen').attr('id');
    
    $('.off_right').remove();
    //$('.off_left').load('load-content.php?page_id='+(current_id-1));
    $('.off_left').html('Yep, moving L');
    $('#article_columns').stop().animate({
        marginLeft: 0
        }, 1000, function(){
            $('.on_screen').remove();
            $('.off_left').attr('class','column on_screen');
            $('#article_columns').prepend('<div class="column off_left" id="'+ (current_id - 2) +'">&nbsp;</div>');
            $('#article_columns').append('<div class="column off_right" id="'+ (current_id) +'">&nbsp;</div>');
            $('#article_columns').css('marginLeft','-200px');
        }
    );
});
$('.arrow_R').live('click', function(){
    var current_id = parseInt($('.on_screen').attr('id'));
    
    //$('.off_right').load('load-content.php?page_id='+(current_id+1));
    $('.off_right').html('Yep, moving R');
    $('.off_left').stop().animate({
        width: 0
        }, 1000, function(){
            $('.off_left,.on_screen').remove();
            $('.off_right').attr('class','column on_screen');
            $('#article_columns').prepend('<div class="column off_left" id="'+ current_id +'">&nbsp;</div>');
            $('#article_columns').append('<div class="column off_right" id="'+ (current_id + 2) +'">&nbsp;</div>');
        }
    );

});