Gazley

Continuous Scroll - Recommended Approach?

Recommended Posts

Hi,

I'd like to add a continuous scroll effect to the home page of a site. I haven't done this before and wondered whether there is a "go to" solution that is recommended?

Many thanks! :)

Share this post


Link to post
Share on other sites

Hi @DaveP - thanks so much for pointing me towards Intercooler! It looks awesome and I hadn't previously heard of it :) 

 

Share this post


Link to post
Share on other sites

What you need to do is basically:

  • Get a list of pages with limit for pagination $pages->find('template=post, limit=10, sort=-published');
  • Render a list of items
  • Render the pagination at the bottom of the page
  • Using JS listen to scroll event, and trigger AJAX request
  • Get the response, filter the list of elements, replace the container that holds the old items
  • Repeat

As a different approach, you can implement barba.js for PJAX (ajax with history support) (and limit it to only pagination links, if you prefer), and trigger click() on the next pagination link when it gets closer to viewport. For that you can use scrollMonitor.js. Total weight of these two scripts are under 15KB, they don't add much load on the page.

One bonus is that you can enable barba.js on all (internal) links (it's enabled by default) to make transitions between pages feel more responsive.

  • Like 2

Share this post


Link to post
Share on other sites

Hey @abdus, hope you're well. Thanks also for pointing me to these great javascripts:) I also didn't know about these little beauties either. I now have plenty to work with. I appreciate the heads-up!

Cheers!

  • Like 1

Share this post


Link to post
Share on other sites
5 minutes ago, Gazley said:

Hi @DaveP - thanks so much for pointing me towards Intercooler! It looks awesome and I hadn't previously heard of it :) 

 

No problem. I've used it quite a bit, although not for the kind of stuff you're talking about at the moment. For anyone like me who's a bit sketchy on plain js, it's a great help and very powerful. It makes doing ajaxy search boxes and such an absolute doddle, cos PW plays real nice with ajax requests.

  • Like 1

Share this post


Link to post
Share on other sites

Is there no way to do this without plugins?

I am trying, but can't get even the most basic Ajax to work. I am trying to jQuery load() a test.php from an /inc folder in templates, but keep getting file not found.

Is there something in Processwire that prevents getting template parts via Javascript?

When I put 'test.php' outside of Processwire, in the root of the site, including it with jQuery load() is no problem.

Share this post


Link to post
Share on other sites

Thanks szabesz. I had seen some info about that and have made a "loadmore" template and set up some kind of page.

But how should I configure that page? I have it hidden etc., but you still have to publish it, right? Will it behave exactly the same as a plain php inc template part? Or do I have to do other things to prevent it from being parsed and filtered etc.?

What is the mysterious $config->ajax; ?

  • Like 1

Share this post


Link to post
Share on other sites
43 minutes ago, modifiedcontent said:

What is the mysterious $config->ajax; ?

It can be used out of the box when jQuery is used for AJAX, more: https://processwire.com/talk/topic/15809-sessions-db-http404/?do=findComment&comment=141119

Hidden pages are still accessible via their URL so you can use it if your page template file handling the AJAX request is not used for displaying anything else. Unpublished is not accessible (except for logged in superusers) so you need to publish it.

43 minutes ago, modifiedcontent said:

Will it behave exactly the same as a plain php inc template part?

A page can be dedicated solely to be an AJAX call processor if you wish to, just check for the sign of an AJAX call, echo your output and use return $this->halt(); to stop the process. Since such a setup is a normal page request it behaves like one, so that is why "ifs" are needed.

Here is Ryan's post about the basics: https://processwire.com/talk/topic/225-how-to-work-with-ajax-driven-content-in-processwire/

43 minutes ago, modifiedcontent said:

Or do I have to do other things to prevent it from being parsed and filtered etc.?

If you redirect to 404 if it is not an AJAX call, it should be enough to make sure such a page is practically nonexistent for the outside world.

 

 

Edited by szabesz
typos
  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.