Can't install Infinite Scroll

Question

Can't install Infinite Scroll

271 views Asked by dinarkino At 18 October 2018 at 20:54

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!

Original Q&A

There are 1 answers

**Alvaro Castelan** · Accepted Answer · 2018-10-18T23:52:58+00:00

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.

TechQA.

Can't install Infinite Scroll

There are 1 answers

Related Questions in HTML

Related Questions in SCROLL

Related Questions in BLOGS

Related Questions in INFINITE-SCROLL

Related Questions in ENDLESSSCROLL

Popular Questions

Popular Tags

Trending Questions