Seamless pagination with "pjax"

Community resources Webflow Tips
22

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

23

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

Thanks

1 Like
24

@aaronocampo :thinking:That’s an interesting scenario. Can you share the published url or project?

25

Thanks @matthewpmunger

The live site is: https://www.superiorteaching.mx/ingles just before the footer section

Here is the preview link: (the “ingles” page)

https://preview.webflow.com/preview/stuniversity?utm_source=stuniversity&preview=0e11b33f6ba3df8a10b284cfb301ce7f

Thanks

26

@aaronocampo You could try moving the id tags up to the tab panes. The script is supposed to target :point_down:

27

Maybe I will need to take another approach, I did what you suggested and didn’t work, tried different levels like tab pane, tab content, columns, etc none of it worked.

28

Great trick :slight_smile:

How can we get the pagination buttons to jump to the top of the section/cms list after a user presses either one if we have multiple rows?

1 Like
29

Thanks a lot for that piece! It’s just in time!

30

If the lists have a uniform position in the page, you could try a pixel value number in the scrollTo: config (instead of false).

It also might be possible to measure the list’s position on the page on click, but that would take some experimentation. Pjax library events docs.

$(document).on('pjax:click', function() { ... });

31

@forresto

I’m getting the same issue with tabs. I am using tabs to sort blog articles by content subject. Each tab shows different content from a different collection. Some tabs have 2 collections within them. When I place the seamless-replace on each individual collection wrapper, it only works for one of them and the only way to see the next page on the secondary collection is if you reload the page.

Site content is protected so can’t share read-only but I can duplicate the issue if need be.

32

This is awesome - so easy to implement too! I am having issues with it messing up the page load interaction. When hitting next/previous the page load elements revert to their initial state, but don’t actually load their interaction. Is there a way around this? I’ve already added the reinitialize interaction code

https://pointman-v2.webflow.io/resources

33

Hey all, for those having issues with animations not re-initializing, it’s possible that you run into problems when using IX1. To properly re-initialize those (and IX2 animations) use this code:

window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require( 'ix2' ).init();

@allykat87

34

Hi @Pascal_Tremblay … I am having issues with my page-load interactions and they have not been resolved by that code or the one @forresto mentioned in the comments

Here is the code I inserted into the /body section of the page in question:

<!-- Start seamless-pagination custom code -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  var containerSelector = '#seamless-replace';
  $(document).pjax(
    '.w-pagination-wrapper a',
    containerSelector,
    {
      container: containerSelector, 
      fragment: containerSelector,
      scrollTo: false,
      timeout: 2500,
    }
  );
  // These 3 lines should reinitialize interactions
  $(document).on('pjax:end', function() {
    Webflow.require('ix2').init();
    
    window.Webflow && window.Webflow.destroy();
		window.Webflow && window.Webflow.ready();
		window.Webflow && window.Webflow.require( 'ix2' ).init();
  });
</script>

<!-- End seamless-pagination custom code -->

And here is my read-only link:

https://preview.webflow.com/preview/nicholaspfosiphoto?utm_source=nicholaspfosiphoto&preview=6532666811a6dde76efa787602d44637

As you can see when you load the “cruising” page the nav items (a back button and page title) drift in from the top. However, when I hit next (the arrow on the right) the pagination effect works wonderfully but the nav items aren’t displayed (presumably because the page was reset to its initial state and the interactions not initiated?).

Ideally, I’d have this pagination effect work, but have those fly-in animations not reoccur - it looks cluttered. I just want them to sit there. Thanks

Nick

1 Like
35

Just want to second @npfosi 's issue with page-load interactions getting killed with the code above. Any ideas would be hugely helpful! @forresto @Pascal_Tremblay <3

1 Like
36

Can’t for the life of me figure out how to get the separate collection lists to re-load independently on seamless-replace. Can anyone help out?

https://preview.webflow.com/preview/stabicraft-southern?utm_source=stabicraft-southern&preview=963610ba22407bf9e1dc7a71e75fd3ad

Look at the Traded Boats Template page

37

Yup, I also have a page with tabbed content, and it doesn’t work, with the exception of one tab.

Any ideas @forresto?

38

Came across this script while searching for a workaround (needed a slider in a Collection). It is definitely working, thanks so much for sharing!

However, I am running into the same page load IX2 issue where the page load interaction is not being re-initialized. Has anyone else had any luck with solving this?

1 Like
39

I was able to find a workaround by adding a duplicate “on-scroll” trigger for the same animation I had on page load. That way when jumping between pages, the animation would still trigger when the user scrolled to it. Might be worth trying for you.

2 Likes
40

Same issue :disappointed_relieved:
Maybe it requires adding some parameter in the URL when clicking on a tab to work ? (Since the pagination seems to work by adding a parameter for collection and a parameter for page)

41

This is only useful if the collection wrapper fits in the viewport. Is there ANY way to scroll to the top of the wrapper or section if the collection is longer than the viewport? A responsive solution, I have been hunting for an answer to this everywhere and it seems it might be in the too hard basket…

2 Likes