Infinite scroll on one page with static data

Asked

Viewed 247 times

6

I have the following extrusion and want to limit the amount of "class/posts" to be displayed. 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 need any data from the database because I already own the content on the page 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 just two and as I click on a "see more" button, it will add more data in the view.

javascript jquery

2 answers

5

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

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

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

Create a button that will display the other elements after the last element, and create an event click to that button that will perform 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>
<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>

   <button>Mais..</button>

</div>

  • Dude didn’t know this jQuery dial, top.

  • Very useful in some cases :)

3


As you said 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 right. In this model you don’t need jQuery or JS

The idea is that whenever the input for checked it shows the next block, this block in turn has inside one more input that when checked shows the next block. Each new block always gets inside the previous block. Note the indentation of the ok code.

Take the example, repare que o CSS nunca muda, independente da quantidade do conteúdo, you just need in HTML to go putting the blocks inside each other. No matter how many Divs you have inside each block, this makes it easy for you to show 2-in-2 as in the example or 1-in-1 or 4-in-4, it doesn’t matter for the CSS rule. See the comments I left in 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>

  • Great, thanks, I didn’t know you could do it using just css. Taking advantage of your comment, you use + and also use ~, I usually use both individual, is there a difference between them? seems to do the same thing to me

  • @Otaviofagundes actually selector + references the sibling element ex: div + div {} means that css will only affect the div that is followed by another, if in your html I’ve been div Section div css does not work, already with the ~ vc selector you get all the independent sisters Ivs if you have other tags between them, and not only the first sister tag understands. Take a look at this question that will clarify you more https://answall.com/questions/6745/qual-a-usere-do-operator-til-no-css And particularly in this example I used ~ pq between checkbox and div has a label that I wanted to ignore and + wouldn’t give

  • 1

    Thanks for the explanations

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.