jQuery: basic content pagination

With jQuery it is possible to add simple but effective pagination effects to our documents. In this post I'd like to show you a basic implementation of content pagination. We start with a basic markup like this:

<div id="pagination"></div>

<div id="slider">

    <div>1</div>
    <div>2</div>
    <div>3</div>

</div>

So far we have an element which will contain our pagination links and three other content boxes inside a wrapper. Since we actually want our content to be displayed one box at time, we have to add the following CSS styles to our document:

#slider {
 width: 300px;
 height: 200px;
 overflow: hidden;
 background: gray;
}

#slider div {
 float: left;
 width: 300px;
 height: 200px;
 background: silver;
 line-height: 200px;
 text-align: center;
 font-size: 4em;
}

#pagination {
 width: 300px;
 margin-bottom: 0.5em;
 text-align: center;
}

#pagination a {
 margin-right: 0.3em;
}

Thanks to the overflow property we hide the exceeding boxes that will be shown later. Now, since the jQuery code requires a few more steps, it's better to show that code in a more useful order. First of all, we need to initialize our code when the DOM is ready, like so:

$(document).ready(function() {

// jQuery code here

});

Now we need to:

1. assign a unique ID to each content box
2. create pagination links with anchors that point to our IDs

The following code use some counters to perform this task:

    var idCounter = 0;
    var idName = 'slide-';
    var idRefs = [];
    
    var linkCounter = 0;
    
    $('#slider div').each(function() {
    
        idCounter++;
 
 $(this).attr('id', idName + idCounter);
 
 idRefs.push($(this).attr('id'));
 
 $(this).hide();
    
    });
    
    
    for(var i=0; i<idRefs.length; i++)     {
    
        linkCounter++;
        var id = idRefs[i];
 $('<a></a>').attr('href', '#' + id).text(linkCounter.toString()).appendTo('#pagination');
 
    
    
    }

We've simply created an ID whose name makes use of a progressive numbering, so we'll have slide-1, slide-2 and so on. Each ID is the result of a string concatenation between the ID name and its counter. Here I'm simply taking advantage of the loose typing of JavaScript, but if you want to be more accurate, use the toString() function on the counter. We use the idRefs array also for creating our pagination links. Note, however, that our content boxes are all hidden by default.

Let's move on our newly created pagination links and add the desired behavior to them. Here's the code:

 $('#pagination a').each(function() {
    
        var $a = $(this);
 
 $a.click(function(e) {
 
     var href = $a.attr('href');
     var $id = href.replace('#', '');
     
     for(var j=0; j<idRefs.length; j++) {
     
         var idRef = idRefs[j];
  
  if($id == idRef) {
  
      if($(href).is(':hidden')) {
      
          $(href).show(300);
      
      }
  
  } else if($id != idRef) {
  
      var ref = '#' + idRef;
      
      if($(ref).is(':visible')) {
      
          $(ref).hide();
      
      }
  
  
  }
     
     
     }
     
     e.preventDefault();
     
     
 
 });
    
    
    });

Again, we're using our idRefs array to check whether a box is currently visible or not. If a box is visible but it's not the target of our link, we hide it. On the contrary, if a box is the target of our link and is hidden, we show it. It's worth mentioning that browsers store anchor values with an hash before the actual value of the anchor, so for our example we've replaced it to make a comparison with our idRefs array. You can see the final result here.