Book!

by Joe Saad

HTML

<div id="book">
<button type="button" class='prev'>prev</button>
<div id="container">
    <div id="1" class='page'><b>Page1</b> facilisis lundium! Eros natoque ac? Pulvinar auctor dignissim enim elementum lectus! Nisi sociis, non placerat pulvinar dolor, odio aenean hac turpis ac sit penatibus, eu! Tortor ultrices mauris et nascetur nisi ac? Platea turpis duis! In adipiscing elit vel. Adipiscing! Enim duis proin elementum facilisis ut nunc cum lacus, porta sit enim magna penatibus ut, egestas! Ridiculus nunc elementum augue nunc integer rhoncus penatibus sed! Et quis vut? Elementum amet odio, ac pulvinar ultricies sociis ac! Lorem, urna urna amet, augue? Magna augue et, sed, phasellus ut magnis lundium, porttitor parturient, nisi arcu nunc, porta egestas scelerisque, et turpis augue urna, non augue nisi! Porttitor sit placerat! Enim risus sagittis, placerat nisi proin. Elit porta lorem. Rhoncus? Eu penatibus.</div>
    <div id="2" class='page'><b>Page2</b> scelerisque porta! Pulvinar, risus! Egestas? Facilisis rhoncus hac ac ac pid porta et, adipiscing nisi penatibus et, magna natoque sed. Lundium montes urna! Non etiam adipiscing cursus, nec sed. Elit, adipiscing mid. Tristique, penatibus nisi eros sagittis, amet amet tristique, proin, risus, dapibus magna turpis, quis proin ultricies ac cursus diam! Platea, nascetur est, egestas sit aenean eros montes ultrices lundium urna adipiscing, hac pulvinar? Massa, integer sociis scelerisque vel lacus eu scelerisque, sed nunc, urna facilisis, in massa vel! Cursus sed non in. In? Cum magnis purus sociis eros lorem pellentesque porta? Eu? Lacus lorem lectus egestas ultricies aliquam lacus! Augue! Habitasse amet sit aenean rhoncus, duis montes. Sociis platea! Penatibus, integer placerat amet! Nisi cras.</div>
    <div id="3" class='page'><b>Page3</b> tincidunt, magna turpis pulvinar a scelerisque, platea, natoque. Aliquam parturient? Nisi integer non montes nisi nunc porttitor porttitor montes nisi auctor sit, aenean in in...

CSS

#book {margin:0 50px; border:1px solid green; float:left; height:410px;}
#container {width:300px; border:1px solid blue; position:relative; height:400px; float:left; }
#container div {position:absolute; background-color:#fff;}
button {height:90%; float:left; margin-top:10px; }

JavaScript

$(function(){
    var counter =0;
    var number_of_pages = $('#container div').length;

    $('#container div').each(function(index){
        //alert(index);    
        //counter = counter+1;
        number_of_pages = number_of_pages -1;
        $('div.page:eq('+index+')').css('z-index',number_of_pages);        
        //$('div.page:eq('+index+')').attr('id',number_of_pages);
    });
    
    currentE = new Object();
    var zmax = 0;
    $('#container div').each(function() {
        var cur = parseInt($(this).css('z-index'));
        //zmax = cur > zmax ? cur : zmax;
        if (cur>zmax) {
           cur = zmax;
           currentE.id = this.id;
           currentE.zindex= parseInt($(this).css('z-index'));
        }
        
    });
    
    alert('currentE.id: '+currentE.id + 'currentE.zindex: '+currentE.zindex);
    
   /* $('button.next').click(function(){
      $()        
    });*/
});