jquery:pagination for elements

see: http://stackoverflow.com/questions/4061393/splitting-a-long-page-into-a-number-of-pages

by Akram kamal

HTML

<div id="paginate">
<p><strong>the Beginning</strong></p>
<p>Lorem ipsum dolor sit amet consectetuer Curabitur Vestibulum aliquam.</p>
<p>Cursus dictum habitasse Cras nunc sed nulla Nullam ut.</p>
<p>Eget nulla pharetra Duis mus lacus sapien dignissim.</p>
<p>Laoreet interdum dui tellus sociis massa In Aenean eros.</p>
<p>Et Vestibulum vel In Vestibulum lobortis quis eros diam.</p>
<p>Aenean id nisl aliquam ut Pellentesque Ut Aenean ut.</p>
<p>In in tortor pretium <img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/> nibh eu.</p>
<p>Tristique et pulvinar dui Phasellus a Vestibulum.</p>
<p>Curabitur quis Vestibulum pretium volutpat Vestibulum urna quis.</p>
<p>Elit eu malesuada Morbi consequat nibh in iaculis tortor.</p>
<p>Orci <img src="http://www.google.com/logos/stpatricks_02.gif"/> euismod a lobortis arcu Cum.</p>
<p>Wisi adipiscing amet justo Nam condimentum Nunc pede.</p>
<p>Dui pulvinar a condimentum Donec morbi.</p>
<p>Tortor lobortis Nullam metus Maecenas risus consequat felis sed.</p>
<p>Ante Vestibulum mauris molestie ipsum Vestibulum.</p>
<p>Quis in sagittis Vestibulum habitant.</p>
<p>Eu neque dictum consectetuer Nulla Vestibulum Vestibulum.</p>
<p>Aliquam vel tincidunt consequat eros.</p>
<p>Enim laoreet id tincidunt suscipit laoreet tortor.</p>
<p>Justo nibh vitae ut fames vitae.</p>
<p>Laoreet Curabitur Quisque Aliquam arcu metus Quisque velit.</p>
<p>Fringilla id tincidunt malesuada semper quis Vestibulum.</p>
<p>Tortor elit auctor Nulla congue.</p>
<p>Congue fringilla Nam mi congue ac sapien laoreet.</p>
<p>Ligula Proin nunc urna augue.</p>
<p>Sociis quis aliquet felis ante pretium gravida pretium tincidunt.</p>
<p><strong>the End</strong></p>
</div>

CSS

*{font:normal 12px Arial}
strong{font-weight:bold}
p{margin:2px;}
#paginate{width:200px;height:200px;overflow:hidden;border:1px solid #414141;}
#paginate img{width:150px;}
#pagination a{cursor:pointer;}
#pagination a.current{color:red;cursor:default;}

JavaScript

$(window).load(
function()
{
  var o=$('#paginate').first(),
      h=o.height(),
      c=$('<div/>').css('width',o.width()).addClass('part'),
      cc,i=1,item,
      p=$('<div id="pagination"></div>').append($('<a/>').text('['+1+']').data({i:0}));
      
      o.before(p);
  
  
  do{
      if(typeof cc=='undefined'){cc=c.clone().appendTo(o);}
    
    
    item=o.children().not('.part').first().appendTo(cc.first());
    
    if(cc.children().length>0 && cc.height()>=h)
    {
      p.append($('<a/>').data({i:i++}).text('['+(i)+']'));
      cc=c.clone().appendTo(o).append(item);
    }
  }while($('#paginate').first().children().not('.part').length>0);
  
  if($('.part',o).length<2){p.remove();return;}
  $('.part',o).not(':eq(0)').hide();
    $('a',p).click(function(){
      var _this=$(this);
      $('a',_this.parent()).removeClass('current');
      _this.addClass('current');
      
      $('#paginate>.part').hide().eq(_this.data('i')).show();
      }).first().addClass('current');
  
  
  return;
});