Hi. I was comissioned recently to build a site and one of the requeriments was to have "infinite scroll" functionality for content pages. You may have stumbled upon similar functionality in sites like The Intercept and others, where you scroll down to the end of the page and a new article is loaded automatically, for example:
https://theintercept.com/2019/01/21/ocasio-cortez-marginal-tax-rate/
Such UX pattern is increasingly popular nowadays but to my surprise I couldn't find any Drupal module offering this functionality. I'm perfectly aware of the various modules that provides a similar feature for views or even generic pagers. I spent a few days trying to mash up something out of them but the compromises were too high and the solution never felt right. Since I couldn't find anything specifically tailored to content pages, I decided to roll my own.
Let me know what do you think!
Comments
Views Infinite Scroll
What’s about that:
https://www.drupal.org/project/views_infinite_scroll
Yeah, as I commented before
Yeah, as I commented before there are several solutions for Views, but I found none for the specific use case.
Testing this out now.It's
Testing this out now.
It's loading all the nodes at once for me (I'm using 10 nodes at a time).
Also, as soon as I scroll, it shows the last node url in the queue. Scrolling then does nothing to change the url (actually it flickers). It seems as soon as scroll is initiated all the nodes load and then the last node url is only shown. Changing the general settings had no effect (load offset, scroll offset).
Also, I had a bit of an issue getting the waypoints library to work. When downloading the file from github, jquery.waypoints.js is located in the lib folder. Do you just rename the lib folder to waypoints? What I did was rename the waypoints-4.0.0 folder to waypoints and then uploaded the files in lib to waypoints. Seems to work, I guess, as reports states it is working.
Here is an example page:
https://cosmicbook.news/batman-christian-bale-packs-pounds-dick-cheney-role
Not sure if there could be a conflict with a different module. I have a bunch enabled and am also using Boost. I'll continue to toy around and see what I can come up with. Thanks for doing all the work. I've been looking for something like this for a while.
Here are screenshots of my settings: https://imgur.com/a/NZZvpA7
Hi Matt! It sounds like
Hi Matt! It sounds like something is really wrong with it. You may find useful information in your browser's console, take a look to see if you can spot any useful information. Anyway, if I'm reading you well, you only copied the jquery.waypoints.js file? If so, that's definitively the reason. The module uses other files from the Waypoints library, so you should copy the whole folder as commented in the readme file:
Please let me know if this helps.
Best.
Scratch that!
Sorry, I didn't see your screenshot before posting the previous reply, it is obvious that my readme file is wrong! :|
Yes, you should use the lib folder only, not the whole package. This is the expected structure of the directory:
- libraries- waypoints
- shortcuts
- jquery.waypoints.js
- jquery.waypoints.min.js
- noframework.waypoints.js
- noframework.waypoints.min.js
- waypoints.debug.js
- zepto.waypoints.js
- zepto.waypoints.min.js
I'll update the readme file ASAP. Done.All nodes loaded irrespective of load/Scroll offset
Hi Proteo,
I was looking for a feature very similar to this and have tried your Module. But unfortunately the nodes are loaded all at once which is not intended though I have tried several combinations with available options in the module.
My Dev site link : https://newstage.fortlauderdaledaily.com/upfront/noteworthy/guide-shoppi...
-> Loads all nodes on parent page
-> Page Title & URL update happens as soon as the parent page loads
-> The above causing multiple pageview hits to Google analytics
Here's the config screenshots link https://imgur.com/a/HE8kjny
Also It would be good to have add-on feature like Autoload Delay.
Hi Karthik, thanks for your
Hi Karthik, thanks for your report.
I've been using the module in a couple of sites and it seems to work fine, so I guess there's something I haven't figured out causing this issue (maybe another contrib module, or a different setting). Anyway, I've PM'ed you the URL of a site currently in development which uses NextNode so you can see it in action.
Since you're the second user reporting the same issue, it is clearly something I need to check out. I'll setup a test bed and try the module with different configurations, hopefully I can reproduce the problem.
Thanks Proteo. Meanwhile I
Thanks Proteo.
Meanwhile I will try to identify the issue from my side and if possible add the additional feature which I am planning to have.
Karthik, I think I may have
Karthik, I think I may have found the problem, or at least a part of it.
Inspecting the content of your HTML markup, I came to realize that the element that works as container of your nodes (".node-content") reports a height of 0. This is because all of the inner elements of .node-content (for example, .custom-breadcrum) are being floated to the left.
This causes other parent elements to have no height, such as the wrapper elements used by NextNode to "hook" the Waypoints plugin. Basically, all what the waypoints script sees is an empty element, which is why it triggers the loading of new elements in cascade.
Let me know if this helps!
EDIT: Just to confirm, I did a quick test on your site using Chrome's local overrides. I removed the floating rule of your node elements and yay! everything worked as expected.
Proteo, Thanks man din't
Proteo, Thanks man din't except that small to be a problem in this entire scenario. Silly me :)
Beautiful job!
Hi @Proteo!
I tried your module and it's a beautiful piece of software, well done!
Very good documentation, lots of great features and ready for other developers to hook into it and customize as needed.
Congratulations!
Hi Bernard, thanks for your
Hi Bernard, thanks for your kind words :)
Hi @Proteo!Thank you very
Hi @Proteo!
Thank you very much for fantastic work!
This module is so awesome to include by default all features I ever need.
The only one I didn't find how to change url of ajax call for loading next node.
I mean, how to change url from "/nextnode/%/%" to "/api/nextnode/%/%" ?
Maybe there is JS variable for ajax path, like is done in nodeviewcount?
So I will be able to change ajax request path in JS in my module or template.php and then using hook_url_outbound_alter() to process the call on /api/.. url.
Thanks biblos
It's good to hear you found this module useful.
Unfortunately, a custom Ajax delivery callback path isn't a supported feature, but if you reeeally need it you can change the path in these functions:
nextnode_menu()(line #89) andnextnode_link_selector()(line #697). That should do it, but obviously I haven't tried and it may have other effects.After making the changes in the code, you will need to flush your caches.
Regards.
Thank you very much, Proteo!
Thank you very much, Proteo!