Well, I think by the time we have agreed that the Pagination system as we find it on most websites today sucks and just “gets the job done”. Clicking through the next or previous page normally is enough and pagination systems really get ugly when showing off like “1, 2, 3, 4 … 679, 680, 681 … 1021, 1022, 1023″.

And you say you can make pagination more awesome?

This for sure depends on your point of view but you can try going to the index page of this portfolio and scroll to the bottom or just view the

The CSS:

   1. div.paginate {
   2.   line-height: 23px;
   3. }
   4.
   5. div.slider {
   6.   width: 180px;
   7.   height: 22px;
   8.   float: left;
   9.   margin: 2px 5px;
  10.   cursor: pointer;
  11.   background: url('Slider.png') center center no-repeat;
  12. }
  13.
  14. div.knob {
  15.   width: 22px;
  16.   height: 22px;
  17.   cursor: pointer;
  18.   background: url('Knob.png') no-repeat;
  19. }
  20.
  21. div.knob:hover {
  22.   background-position: 0 -22px;
  23. }
  24.
  25. span.current {
  26.   font-weight: bold;
  27. } 

div.paginate {
  line-height: 23px;
}

div.slider {
  width: 180px;
  height: 22px;
  float: left;
  margin: 2px 5px;
  cursor: pointer;
  background: url('Slider.png') center center no-repeat;
}

div.knob {
  width: 22px;
  height: 22px;
  cursor: pointer;
  background: url('Knob.png') no-repeat;
}

div.knob:hover {
  background-position: 0 -22px;
}

span.current {
  font-weight: bold;
}

The HTML (Example) – This is what your code should generate

   1. <div class="paginate">
   2.   <a href="index.php?start={start}" class="link" style="display: none;">11</a>
   3.   <span class="per" style="display: none;">5</span>
   4.   <div class="slider"><div class="knob" title="Drag me to go to the desired page"></div></div>
   5.   <span style="float: left;">Page <span class="current">2</span> of 11</span>
   6. </div> 

Demo: http://og5.net/christoph/article/A_better_Pagination

Download: http://og5.net/christoph/Scripts/Pagination/Pagination.zip

Source: http://og5.net/christoph/article/A_better_Pagination

Related Listings:

1. Create a Sprited Navigation Menu Using CSS and MooTools CSS sprites are all the rage these days. And why...
2. iPhone Checkboxes Using MooTools One of the sweet user interface enhancements provided by Apple’s...
3. Page Peel Effect Using MooTools A great script back in May titled Simple Page Peel...
4. Get Slick Effects with MooTools Kwicks When it came time for my employer to redo their...
5. Animated Navigation with CSS & jQuery The simple and elegant roll over effects that I liked....

Do you like this post?

Email: