Streaming live at 10am (PST)

Infinite Scroll - Infinite Scrolling


#1

Repost from Infinite Scrolling using Custom Code:




– So it took me some time, but I've finally managed to make a working demo, of an Webflow infinite scrolling website. I've been a little bussy lately, my exams are on and so... smile Now, it's not all perfect as I metion also as well on the demo site, but the basic functionality is there! blush It works using the Infinite Scroll plugin (www.infinite-scroll.com).


How to do it!:



Making the basic page

On the first page, where you have the container for the content that you want to be loaded (using Infinite Scroll), you add a "next link" at the bottom of the page, linking to a new page.

This page that your link, is linking to, must be a new page on your site, containing only the next section of content that you wish to be loaded into your first page. On this page, there is then another "next link", linking to the next page, with the next section of content, that you wish to be loaded onto your page, using infinite scroll. On that page there will then be another "next link" linking to the next section of content tha you wish to be loaded in to your first page, using infintie scroll. And so on....

So you basicly just add seperate pages, containing only the next section/piece of content that you want loaded onto your site (the first page). And then links connecting these different pages. Including a link on the first page, of course.

The plugin will then, so to speak, take care of the rest, and load the content of the pages, into your first page, one after one, and that, with a loading-spinner appearing before every load (this can of course be modified in the settings of the plugin). So you thereby get the Infinte Scroll effect that you want.

It might just be 'little easier to understand, seeing the demo in design mode, so you can see the construction and the pages:
https://preview.webflow.com/preview/grid-style-infinite-scrolling-example?preview=fdd039e7139a456a6ee7f0c9f5056daf
(And please forgive me about it, but the logic of classes on this site aren't all neat. Could be a little better... never mind blush lollipop computer )

Adding the plugin rocket

In the Custom Code tab, under settings (Adding custom code to your webflow sites header, see how to do it here) add this to your header-code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>
<script>

$.noConflict();
jQuery(document).ready(function($){
  $('.scroll').infinitescroll({
      navSelector  : '.next',    // selector for the paged navigation
      nextSelector : '.next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.product-row',     // selector for all items you'll retrieve
      animate      : true,
      loadingText  : "", 
      maxPage:undefined,
      loading: {
          finishedMsg: 'No more content to load!',
          img: 'http://i.imgur.com/4zOIFXZ.gif',
          msgText: " "
        }
      });
});
</script>

– On the demo, and here on this github page: https://github.com/infinite-scroll/infinite-scroll and on www.infinite-scroll.com there are more documentation on how to use the plugin. Some tutorials can also be found as well, online. blush

Oh, and here is the actual demo! :

Go rockets, and rabbits! rocket rabbit2
http://grid-style-infinite-scrolling-example.webflow.io


There might possibly, be some, smarter methods, to do this. But this is what I've managed to do. And it's a start.
- Would love to see some of the code-gurus here on the forum making an better and improved version smile

Best to you all! Love n' hugs from Denmark! 🇩🇰
Jonatan.

[/quote]


Is Infinite Scroll possible?
#2

Continuing the discussion from Infinite Scrolling using Custom Code:

coffee Auto scrolling version

http://infinite-scrolling-example-auto-load.webflow.io
https://preview.webflow.com/preview/infinite-scrolling-example-auto-load?preview=6bb93f871d34167a47b9e9166fbe2c8c

Hope you like it sunny Let there be scrolled! computer lollipop watermelon strawberry rocket
<br><br>
Best to you all! Love n' hugs from Denmark! 🇩🇰
Jonatan.<br><br>
[/quote]


#3

Hmm the demo doesn't work for me on Chrome/Mac :/ Sorry to be that guy...


#4

Whoopseay! Fixed that now smiley Sorry bout it!

The reason why it didn't work is becaus Google Chrome is a liiitle hysterical about https security.
I had used this adress to load the source for the plugin:

<script src="https://raw.githubusercontent.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

But actually you have to use a cdn adress, for it to work in chrome:

<script src="https://cdn.rawgit.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>

Works now! smile

@vincent And by the way, I'm glad that you sad it, else it wouldn't have been fixed blush


#5

Hurray I've seen the white rabbit wink

Works well indeed thanks for sharing the trick!

Can you also link to the project page so we can like it and follow your designer profile?


#6

Shure if you would like to blush

rocket Here it goes:

https://webflow.com/website/Awesome-Long-Grid-style-Infinite-Scrolling-webflow-example-(ALGSISWE!)

and...

https://webflow.com/website/Awesome-Long-Grid-style-Infinite-Scrolling-webflow-example-auto-load-(ALGSISWEAL!)

I'm getting all stunnned by that someone actually wants to folllow mu design profile... Not much going on on it! smile


#7

Hehe, I spend a lot of time on the designers' platform, it's full of stuff, ideas, things to clone to study... possible to like projects and comment on them, and the Hire button is kind of cool smile


#8

I Agree 😊



#9

Awesome tip, thanks Jonatan!

I've just tried using this to re-create a sort of instagram-like portfolio page that keeps loading older entries, but i had a quite disappointing issue: the newly loaded items won't work if they are lightbox links :frowning:
(meaning that if i click on any of the page2 onwards thumbnail images, nothing will happen)

Any ideas on how to work around this?


#10