Streaming live at 10am (PST)

Seamless pagination with "pjax"

The simplicity is the best part. :blue_heart:

2 Likes

Great! Thanks a LOT :blue_heart:

1 Like

Hey @forresto

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?

Read Only Link

Thank you for sharing @forresto just want a needed/wanted. It breaks any interactions whenever you use the pagination, any ideas about that?

I’ll look into that. That’s one of the main issues to consider before making this an official solution.

2 Likes

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. :cool:

  // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
  });
6 Likes

Thank you @forresto and the Interactions Expert!!!
This code is so delicious, I have to dance.

3 Likes

It worked like a charm! Thanks to both of you.

1 Like

Tips for code dummies like me:

Assign a div id of seamless-replace to the Collection div enclosing the pagination content.

Insert code into the before the /body tag section of the page settings - do not use an Embed element, it doesn’t seem to work.

Took me ages to figure the last tip out but got there in the end :grin:

1 Like

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.

1 Like

I hadn’t seen this post, that’s great @forresto ! Thanks!

1 Like

So thankful I found this thread, but I don’t think I’m setting it up right. I need to change the ID of this element, correct?

36%20PM

Hey @hirastudio

Place the #seamless-replace ID on the Collection List Wrapper. Hope that helps.

1 Like

Is it possible to do page transitions with this method?

1 Like

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…

1 Like

@matthewpmunger thanks, that worked! what’s the solution if you have multiple per page though?

@jorn that’s interesting. I have a scroll interaction on my page as well and it seems it’s not bothered by it.

Hey @jorn there’s another step to keep the interactions working.

@hirastudio Add the #seamless-replace ID to each Collection List Wrapper that is paginated. That should work.

1 Like

Thanks @matthewpmunger I’m already using that part as well.

Do you have any idea why this wouldn’t work if collections were nested in tabs?

Thanks

1 Like