Using the jquery-pjax library, it is possible set up paginated collections in a way that browsing feels snappier. Demo: seamless-pagination
Quick version of how jquery-pjax works:
Listen for clicks on links with a certain selector
Instead of going to the link, load the html data in the background
Replace the specified chunk of html
Use history.pushState to update the URL, so that refreshing the page / sharing a url works as expected
In this demo, everything inside the #seamless-replace div will be replaced with every previous/next navigation. It is possible to replace a smaller portion of the page, but with multiple paginated collections on the page we also needed to replace the other previous/next links.
Thanks for this great snippet! It’s working like a charm here. One issue that I can’t seem to solve is that the hover trigger interaction becomes disabled after moving away the first pagination page.
This used to ONLY happen in the designer when using pagination, but the published page would keep the hover triggers just fine. Something about this code and what’s used in the designer appears to be in conflict with the interaction.
Any ideas if it’s possible to fix this in the injected code?
Our Interactions expert hooked me up with the magic words to reinitialize interactions after the pjax transition happens. I added some bounce effects to the previous/next links in the demo and it seems to work.
// These 3 lines should reinitialize interactions
$(document).on('pjax:end', function() {
Webflow.require('ix2').init();
});
If you want to know why, it’s because that code expects to run after the jquery library has loaded. The code could live in an embed block, but you’d need to wrap it with some magic to make it run after jquery loads.
Hey @forresto I’ve noticed that another elements interaction stopped working after pressing the pagination buttons. The interactions inside the list is working fine but not my Navbar in this case. Any ideas?
Here’s my site centred.webflow.io The nav bar appears after a few seconds and after that I have a scroll interaction that makes it disappear when scrolling down and appear when scrolling up. But that isn’t working after you pressed the pagination. The hover interaction inside inside the list still works though.
Edit: on refresh, with the custom pagination url, the interaction works again. Strange…