Paging effect

Question

Paging effect

Navigation

#1 by (5 votes)
#2 by (0 votes)

1

Note sites and blogs with pagination in the header or footer. When the Anterior or Próximo button is pressed, the bold link is highlighted in the numeric link, signaling the page where the user is currently.

Well, in the middle of viewing this functionality, the question arose:

How to achieve this effect flag paging link with each click on one of the control buttons (Previous / Next), that is, highlight the link of the page the user is currently in.

Example

The user visits the Home Page, and it is set to [1] in the paging bar.

The user then slides the mouse pointer over the paging bar.

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

.. and click on the Avançar button. logo is redirected another page, and the paging bar is signaled.

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

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

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

This even goes by switching paging number with each click on the control buttons Voltar / Avançar .

javascript css

asked by anonymous 27.05.2016 / 01:39

2 answers

0

@rodorgas answer I had a certain disappointment in a particular browser (it did not work), so I decided to do some research, how to develop a flexible script for all browsers.

As @rodorgas mentioned:

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

The solution found was Rebuild this Paging 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 Paging Effect fits very well, with: Anchors, Array, Strings, Iframe, Table, links, etc.

Another thing is, you can define a directory to contain all the pages to be redirected, via pagination, meaning that for better organization they should be named A - Z or ordered by numbers, so it 's easier to do programming manual.

IMPORTANT!

The Tips as well as Paging Effect given here, apply only for use with Javascript, there is no link with PHP language, the control of the pagination for the account of the Server, but rather to create an obscure programming (When Javascript is enabled in the Browser).

Now, just let the creativity go.

To give a professional look just replace the CSS of the code above with the tutorial Digg-style pagination with CSS simply illustrates the creation of the paging bar. Home There's also a good tutorial on Pagination Effect in CSS3

27.05.2016 / 22:33

jQuery, block multiple clicks on the link Which database is ideal for my scenario?

score 5 · Accepted Answer

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

When someone clicks next , simply check which page number is currently selected, de-select that number, increment it, and select the increased number. When the person clicks on previous the reasoning is similar, just decrement rather than increment.

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>

While it is simple to do this, there are many ready-made libraries that already come with several additional features. The name of this type of component is paginator , you can check out a list of 10 of them in JQuery or look for other alternatives.