We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you. If you continue without changing your browser settings, we will assume that you are happy to receive all cookies on this website.

CMSMS modules and 'endless scrolling'

'Endless scrolling', 'lazy loading', 'endless pages', 'infinite scrolling', is a feature that only downloads extra content when you reach the end of the current content. Perhaps the most famous example is Facebook. You can scroll down your 'wall' and it will (probably) never end.

As Facebook doesn't want you to download all that content at once 'it waits' for you to reach the end of the current content and then starts loading the next few items.

This article is about the same feature for the CMSMS™ News module. It could however be used for other modules like CGBlog, Products and many others too. If the module has some kind of 'summary view' and supports pagination you're probably good to go.

How to use

What do we need

If you want to display some fancy progress spinner you can probably find one using Google image search (or just steal it from the example on this blog)

How does it work

Most of the magic is done by the jScroll plugin. We only need to take care of a way to display one (or more) News items and provide a link to the next one (or more) item(s). If you think about that, we just need to use the 'pagination' feature that comes with the News module. Note that pagination and displaying multiple items only works for the summary view/action.

The jScroll plugin (almost) automatically finds the link to the next set of items. When the time is there it uses that link to load that set using ajax. This means that the next news items are loaded 'in the background' without reloading the whole web page. Therefore it only needs the bare minimum; just the News items part without the rest of the web page. CMSMS provides a way to only load the part of the web page that comes from the default content block {content}. Append ?showtemplate=false to the URL and you will see what I mean. (If the URL already has some parameters use a ampersand in stead of question mark. E.g: http://www.website.com/?page=home&showtemplate=false). Note that the output isn't a valid web page, it's just a part of it.

The new items are appended to the existing items. jScroll automatically finds the new 'pagination link' (if any) and it starts observing 'page scroll' again. If you scroll to the end of the news items, things start over again until the last item is loaded.

Page template

For this example I made a new page template. I made a copy of the NCleanBlue template and named it NCleanBlue_News. Search for the default content block {content} and make it something like this:

Of course you're free to make it look something else but be sure to use the DEFAULT content block {content WITHOUT block-parameter} to provide the {news ...} tag. And for convenience put that content block inside an easy selectable div (<div class="jscroll"></div> in this example)

As we're making a dedicated template for this feature anyway, we can put our JavaScript and custom style in it. So in the <head> section we paste:

Note: for this example I've placed the jquery.jscroll.min.js and spinner.gif files in the /uploads/template/... folders.

Alternative for the spinner image, if you already use Font Awesome at your site.

loadingHtml:'<i class="fa fa-cog fa-spin fa-3x"></i>'

News module summary template

Loading a few News items and using pagination is available in the default action of the News module (summary action). So we need to make a News summary template that: a. shows a detailed view of the news items b. supplies a pagination link to the next (set of) items.

(Note that we're using the summary action and you probably don't want to supply links to the detail view of the news items)

I ended up with the following News summary template named 'endless_scroll':

Things are pretty standard except for the last three lines. Remember we're using pagination. So if the current 'page' is not the last one, we're provide a link to the next set. Note the '&showtemplate=false' parameter appended to the 'next-url'. The class name 'jscroll-link' is important too as we used that class in the jScroll 'nextSelector' option earlier. We also added the 'rel="nofollow"' to tell search engines not to follow nor index the links as they won't give wanted results.

Uploads module summary template

Optional

If you want to make it really 'endless' you can use this 'quick and dirty' code to let scroll happen from start again. Note that if for example you use 'pagelimit=3' and have 10 items. The 'last round' only one item will be loaded and the next time it will start with items 1-3 etc.

News items

Obviously to show off this feature you need to have some published news items. Create more items than the number you're gonna use for the 'pagelimit' parameter.

News page

So now we need to create the page to show all this. Create a new page. Select the page template you created earlier (NCleanBlue_News in this example) Give it a title and a Menu text In the Content 'block' labeled 'The News tag' type (choose a pagelimit number that suits your needs):

Comments

Click here to leave a comment

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!In case of abuse your IP address will be blocked!

Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!! Consider buying Rolf a cup of coffee in return! [ Click here ]

4 Comments

Aug 11, 2017

Klaus

Hi Rolf, thx for your nice work!

As I wanted to have endless scroll SEO-friendly (according to google the consecutive pages should be found without java script and identyfied with "rel=next" ) , I found another way to feed content instead of News or Blog-modul, maybe this can be a solution too: I use the cms_selflink dir="next" to generate the scroll-Link.

load more It has to be at the end of each content page. To have the title in the content too and not in the template (as showtemplate=false only gives the content) at the beginning I removed the title-attribut from the template and put it in the content. {title}

This way, you could put the whole page into one endless scrolling one.

To only feed some pages, that are not shown then in the regular menue, I organized them as subpages to the entrance page: -home - - home1scroll - - home2scroll .... Interesting: the subpages have to set on "show in menue" to have the selflink work. Therefor I set the mainpage to "not show in menue" and made it visible in the menue with an internal link.

Aug 4, 2017

Timo

Works great only autoTrigger is not working on my site when I set it on true. Any idea what this can be

Jul 27, 2015

Rolf

Hi Max, I used autoTrigger: true for that. Grtz. Rolf

Jul 27, 2015

Max

I notice on your example your endless scroll does not need to click on the load more button - the spinner gif just appears - can you explain how you did that.