Book Page Flipping under Construction

by Joe Saad

HTML

<div id="placed">
    <div id="turn_left">&#171;</div>
    <div id="turn_right">&#187;</div>
    <div id="content1">Odio tempor odio tincidunt a facilisis lorem tempor, est pulvinar augue placerat ut pulvinar? Amet! Integer, platea eros sed enim, auctor, sit auctor egestas, proin natoque porttitor aliquet, cum velit augue montes adipiscing eu porttitor dolor, rhoncus mauris eu. Integer porta tortor, nisi phasellus aliquet sagittis enim nunc! Magnis? Integer augue nec platea ultrices ac sociis a lundium aenean penatibus magna ac a lectus elementum nisi adipiscing lacus, ut augue, eu arcu, aliquet adipiscing elementu </div>

    <div id="content2">Porta urna! Enim ultricies odio egestas? Lorem, tempor. Quis enim auctor ut cras mauris tempor a parturient, amet cum non habitasse sociis. Tristique augue, parturient vel ut nunc arcu eros scelerisque, ac, massa augue pulvinar? Duis nec enim nunc, porttitor lorem lundium ac magnis, non nisi magna! Dis aliquet adipiscing habitasse elementum! Platea placerat a, arcu nunc mattis, dictumst. Magna parturient turpis mid a platea integer cum eros. Dignissim massa massa nec adipiscing est duis egestas proin scelerisque sagittis  </div>
    
    
</div>

CSS

div#placed {border:1px solid red; position:relative; overflow:scroll; overflow-x:hidden; width:400px;height:500px;}
#placed>div[id*="content"] {width:140px;position:absolute;margin:10px 30px;background-color:white;}
b {text-align:center;display:block; clear:both;}
#turn_left, #turn_right{position:absolute; height:100%; background-color:#CCC;width:3px; border:1px solid blue;}
#turn_left {left:0px;}
#turn_right {right:0px;}

JavaScript

$(document).ready(function() {

     $('#placed>div[id*="content"]').each(function(index){
        $(this).append("<b>"+$(this).index()+"</b>");
    });
    
    $('#placed>div').click(function() {
        // $(this).animate({"width": "+=50px"}, "slow");
        $(this).animate({
            "left": "+=550px"
        }, "slow");
    });

});