Pagination effect

Question

Observe paginated websites and blogs in the header or footer. When triggered the Button Anterior or Próximo, is highlighted in bold the numeric link, signaling the page where the user is currently.

Well, amid the visualization of this feature, the question arose:

How to achieve this effect signal paging link each click on one of the control buttons (Previous/Next), ie highlight the link of the page on which the user is currently.

Example

The user visits the Home Page, and the same is set as [1] in the pagination bar.

The User then slides the mouse pointer to the pagination bar ..

<< Voltar [1] 2 3 4 5 6 7 8 9 Avançar >>

.. and click on the button Avançar .. then another page is redirected, and the pagination bar is flagged [2] ..

<< Voltar 1 [2] 3 4 5 6 7 8 9 Avançar >>

.. it proceeds and click on the button Avançar again. and as soon as another page is directed and now is flagged the link [3] ..

<< Voltar 1 2 [3] 4 5 6 7 8 9 Avançar >>

This even goes alternating pagination number with each click on the control buttons Voltar/Avançar.

Answer 1

There are many ways to do this, the most convenient way depends on your environment. This is usually done server-side, but as you tagged javascript and css I will present a way to do with these technologies.

When the person clicks next, just check which page number is currently selected, de-select that number, increment it and select the incremented number. When the person clicks previous the reasoning is similar, just decrease rather than increase.

A quick example of this would be this code:

document.getElementById('avancar').onclick = function() { mudaPagina(1) };
document.getElementById('voltar').onclick = function() { mudaPagina(-1) };

function mudaPagina(cont) {
  // Obtém elemento da página atual
  var pagAtual = document.getElementsByClassName('selecionado')[0];
  
  // Deseleciona a nova página
  pagAtual.className = '';
  
  // Obtém o número da nova página
  var numNovaPagina = parseInt(pagAtual.innerText) + cont;
  
  // Seleciona a nova página
  var novaPagina = document.getElementById('p' + numNovaPagina);
  novaPagina.className = 'selecionado';
  
  // Desabilita voltar/avançar se estiver nos limites
  var limiteEsquerda = document.getElementById('p' + (numNovaPagina - 1)) == null;
  document.getElementById('voltar').disabled = limiteEsquerda;

  var limiteDireita = document.getElementById('p' + (numNovaPagina + 1)) == null;
    document.getElementById('avancar').disabled = limiteDireita;
}

span {
  text-decoration: underline; color: blue; cursor: pointer; padding: 3px;
}
span.selecionado {
  font-weight: bolder;
  background-color: #333;
  color: #fff;
}

<input type="button" id="voltar" value="<< Voltar">
<span id="p1">1</span>
<span id="p2" class="selecionado">2</span>
<span id="p3">3</span>
<span id="p4">4</span>
<button id="avancar">Avançar >></button>

Although it is simple to do this, there are many ready-made libraries that already come with several additional features. The name of this component type is Paginator, you can check a list of 10 of them in Jquery or seek other alternatives.

Answer 2

Still with the reply of @rodorgas I had a certain disappointment in a particular browser(didn’t work), so I decided to search a little more, to know how I could develop a flexible script, for all browsers.

Like @rodorgas mentioned:

"There are many ways to do this, the most convenient way depends on your environment".

The solution found was, recreate this Pagination effect. Check out:

Code

/* Rotina Do Botão Próximo */

document.getElementById('menos').disabled=true;

el = document.getElementsByTagName('span');

var contar = 0;  

var element_2 = document.getElementById('mais');

element_2.onclick = function() {  

contar++;

if (contar == 1) {  
el[0].className = ''; el[contar].className = 'selecionado'; 
}
else if (contar == 2) {
el[1].className = ''; el[contar].className = 'selecionado';
}
else if (contar == 3) {
el[2].className = ''; el[contar].className = 'selecionado';
}
else{
document.getElementById('mais').disabled=true;
document.getElementById('menos').disabled=false;
}
};



/* Rotina Do Botão Anterior */

var element_1 = document.getElementById('menos');

element_1.onclick = function() {  

contar--;

if (contar == 1) {  
el[0].className = 'selecionado'; el[contar].className = '';  
}
else if (contar == 2) {
el[1].className = 'selecionado'; el[contar].className = ''; 
}
else if (contar == 3) {
el[2].className = 'selecionado'; el[contar].className = ''; 
}
else{
document.getElementById('menos').disabled=true;
document.getElementById('mais').disabled=false;
}
};

span {
   cursor: pointer; padding: 3px;
}
span.selecionado {
   font-weight: bolder;
   background-color: #333;
   color: #fff;
}

<center>

<input type="button" id="menos" value="&#171 Anterior"/>

<span class="selecionado">1</span>
<span>2</span>
<span>3</span>
<span>4</span>

<input type="button" id="mais" value="Próximo &#187"/>

</center>

TIPS

This Pagination effect fits very well, with: Ancoras, Array, Strings, Iframe, Table, links, etc....

Another thing is, you can set a directory to contain all pages to be redirected, via paging, it is worth saying that for better organization should be named A - Z or ordered by numbers, so it is easier to do manual programming.

IMPORTANT!

As Tips as well as Pagination effect given here, applies only for use with Javascript, there is no link with PHP language, there is nothing to leave the control of paging on account of the Server, but rather create an obstructive programming(When Javascript is enabled in the Browser).

Now, just let the creativity loose.

To give a professional look just replace the CSS of the above code with the tutorial Digg style paging with CSS which simply illustrates the creation of the pagination bar.

There is also a good tutorial Pagination effect in CSS3