Infinite scrolling in one page with static data

Question

Infinite scrolling in one page with static data

Navigation

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

6

I have the following structure and want to limit the amount of "class / posts" to display. I want to create a button so that, when clicking, it displays and goes showing more and more "class / posts". I only found tutorials that explain how to do this by searching the data in mysql and what I need does not require any data from the database since I already have the content on the page itself one page. The code is this:

<!DOCTYPE html>
<html>
<head>
  <title>Carregamento</title>
</head>
<body>

  <div class="posts">

    <div class="postagens">
      <h1>titulo postagem</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 2</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 3</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 4</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 5</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 6</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 7</h1>
      <p>conteúdo postagem</p>
    </div>

  </div>

</body>
</html>

I want to limit the posts to only two, and as I click on a "see more" button, I'll add more data in the view.

javascript jquery

asked by anonymous 28.08.2018 / 21:52

2 answers

5

Using the : lt (-index) selector you can go showing the elements according to the specified value.

Assuming you want to show every 2 items, you must first hide all but the first 2 items. To do this, you must put the :nth-child selector in the CSS with a formula:

.postagens:nth-child(n+3){ /* esconde todos menos os 2 primeiros */
   display: none;
}

Create a button that will show the other elements after the last element, and create a click event for this button that will execute the function that will display the elements.

Other explanations in the code:

$(function(){
   // captura o click no button filho da classe .posts
   $(".posts > button").click(function(){
      var mostrar = 2; // quantos irá mostrar a cada clique
      var invs = $(".postagens:not(:visible)").length; // conta quantos estão invisíveis
      // se o número de invisíveis for menor ou igual ao número de mostrar
      // mostrar o restante e esconder o botão
      if(invs <= mostrar){
         $(".postagens").show();
         $(this).hide();
      }else{
         // o seletor ":lt" com valor negativo ignora o número especificado de elementos
         // a partir do último elemento da lista
         $(".postagens:lt(-"+(invs-mostrar)+")").show();
      }
   });
});

.postagens:nth-child(n+3){ /* esconde todos menos os 2 primeiros */
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="posts">

    <div class="postagens">
      <h1>titulo postagem</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 2</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 3</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 4</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 5</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 6</h1>
      <p>conteúdo postagem</p>
    </div>

    <div class="postagens">
      <h1>titulo postagem 7</h1>
      <p>conteúdo postagem</p>
    </div>

   <button>Mais..</button>

</div>

29.08.2018 / 01:48

How to create a Grouped List in Laravel 4 from an entity with self-relationship strcpy is merging numeric format with other chars

score 3 · Accepted Answer

As you said that the site was static it is possible to do only with CSS with a few lines inclusive. The most important thing here is to "concatenate" the HTML correctly. In this model you do not need jQuery or JS

The idea is that whenever input is checked it shows the next block, that block in turn has a input inside it as when checked shows the next block. Each new block block will always stay within the previous block. Notice the indentation of the code ok.

See the example, repare que o CSS nunca muda, independente da quantidade do conteúdo , you only need to go in the HTML by putting the blocks one inside the other. No matter how many divs you will have inside each block, this makes it easy for you to show 2 in 2 like in the example or 1 in 1 or 4 in 4, this does not matter for CSS rule. See the comments I left in the HTML.

.show,
input,
input:checked + label {
  display: none;
}
input:checked ~ div {
  display: block;
}

label {
  padding: 1px;
  border: 1px solid;
  cursor: pointer;
}

  <div>
    <div>item 01</div>
    <div>item 02</div>
    <input type="checkbox" id="b1">
    <label for="b1">btn</label>
    <div class="show">
      <div>item 03</div>
      <div>item 04</div>

      <input type="checkbox" id="b2">
      <label for="b2">btn</label>
      <div class="show">
        <div>item 05</div>
        <div>item 06</div>

        <input type="checkbox" id="b3">
        <label for="b3">btn</label>
        <div class="show">
          <div>item 07</div>
          <div>item 08</div>

          <!-- esse é um ex de bloco completo -->
          <input type="checkbox" id="b4">
          <label for="b4">btn</label>
          <div class="show">
            <div>item 09</div>
            <!-- vc pode colocar quantas divs quiser aqui -->
            <!-- aqui deve vir o próximo bloco completo ex: 11 e 12 -->
          </div>
          <!-- fim do bloco completo -->

        </div>

      </div>
    </div>
  </div>