Can't install Infinite Scroll

Question

A few hours trying to implement Infinite Scroll in the blog. The goal is simple, the main page is too long, I want it to load gradually. The authors of the plugin have a perfectly working example, however, no matter what I do, in my case, the plugin doesn’t work properly. I guess I'm missing something.

If I understood correctly, then the plugin works like this: we create a common div and articles inside it. When entering a page, a person sees the first article, when he scrolls down to the next article, the page is enlarged and 2 article is already displayed, and so on. It seems to be what I am doing.

I tried to attach it through the link

<script src = "https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"> </ script>

Tried to upload file to server

<script src = "js/infinite-scroll.pkgd.min.js"> </script>

I tried to make the elements themselves through jQuery, JavaScript and just html, as suggested in the documentation, but all is unsuccessful.

This is a link to a very simple page of the site where I tried to implement it: https://dinarkino.ru/new. At the moment, all paragraphs are loaded at once, although each of them is wrapped in a separate

<article class = "post"> ... </ article>

I'll be very thankful for help!

score 0 · Accepted Answer · answered Oct 18 '18 at 23:52

Make sure you are running the page from http// address, infinite scroll will not work if you are running it from you local files. I set up a local environment using node, npm and express that looks like this ...

var express = require("express");


var PORT = 8080;
var app = express();
app.use(express.static("public"))






app.listen(PORT, function(){
    console.log("App listening on PORT: " + PORT)
})

So my folder structure looks like this

. ├── node_modules │ ├── public │ |── page1.html │ |__ page2.html │ |__ page3.html │ ├── server.js │

Each section you want to load has to be its own .html file. So the body page1.html would look like this. I changed your code to include a div inside of the container to hold the posts and gave the data-infinite-scroll attribute to the div .posts-feed. Then I moved this

 <div class="scroller-status">
            <div class="loader-ellips infinite-scroll-request">
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
            </div>
            <p class="scroller-status__message infinite-scroll-last">End of content</p>
            <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
          </div>

            <p class="pagination">
              <a class="pagination__next" href="page2.html">Next page</a>
            </p>

To be inside of container.

<body>
  <div class="main">
    <div class="container" >
        <div class ="posts-feed" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}' >

        <article class="post">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit in sem eu elementum. Nam sagittis eleifend aliquam. Cras viverra, sapien vel auctor viverra, augue leo commodo ipsum, id euismod elit nisl id felis. Integer vitae mauris est. Cras vitae varius tortor. Nullam tristique ullamcorper imperdiet. Suspendisse potenti. Donec in elit felis. Donec eget nunc porttitor, lobortis lectus id, sagittis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae ornare purus. Sed augue purus, cursus in malesuada non, interdum molestie massa. In interdum nisi at purus gravida rutrum. Praesent finibus lacus ac imperdiet tincidunt.</p>
        <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
        </article>



    </div>

      <div class="scroller-status">
            <div class="loader-ellips infinite-scroll-request">
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
            </div>
            <p class="scroller-status__message infinite-scroll-last">End of content</p>
            <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
          </div>

            <p class="pagination">
              <a class="pagination__next" href="page2.html">Next page</a>
            </p>
      </div>
</div>


</body>

Notice how at the end there is a piece that looks like this

<p class="pagination">
     <a class="pagination__next" href="page2.html">Next page</a>
</p>

This is telling infinite scroll what to load next in href. This here will then load the contents from a separate file called page2.html

Then one page2.html that same section should read

<p class="pagination">
   <a class="pagination__next" href="page3.html">Next page</a>
</p>

so that page3.html contents are loaded.

Thank you! Ok, I tried to do like you said. Now, at least I see that it works, but it shows me the error message: "No more pages to load". I do everything at a web server, so I do not use local files. Here is 3 pages: new (https://dinarkino.ru/new), new2 (https://dinarkino.ru/new2), new3 (https://dinarkino.ru/new3) — dinarkino, Oct 19 '18 at 08:33
On page /new3 or last page remove the following code `
Next page
` — Alvaro Castelan, Oct 19 '18 at 17:31
But the things is, that I have that error message on the first page (/new) and I don't have pagination at the last page (/new3). I found this interesting thing, when I scroll down the first page I see the message from Google Chrome about the dangerous script, and in dev tools, I see this message: _Mixed Content: The page at 'https://dinarkino.ru/new' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://dinarkino.ru/new2'. This request has been blocked; the content must be served over HTTPS._ Maybe the problem in https and htaccess? Do you know how can I solve this? — dinarkino, Oct 19 '18 at 20:08
Ok, I solved that. If I use link like this `href="https://dinarkino.ru/neww2"` instead of `href="neww2"` it works! You can see that on pages /neww, /neww2 and /neww3. — dinarkino, Oct 19 '18 at 20:14

Can't install Infinite Scroll

1 Answers1