FadeIn items (one by one) infinite scroll

Anonymous

#229785

Hi I was wondering if it was possible to have the items fadeIn when there loaded with infinite scroll? Preferably one by one. Right new it’s like, wait I’m loading and BOOM here are the results. I’m just looking for a more elegant way to show the results after more posts are loaded 🙂

Anonymous

#229786

This reply has been marked as private.

Trevor

#229792

There isn’t an option in our plugin to do this, but I guess you could add a CSS opacity transition to the individual post container of the posts, but you would need to get the help of a third party coder with that.

Anonymous

#229794

Hi Trevor, thanks for the quick reply.

I’ve worked with S&F before so I’m quit up to speed about the whole plugin. I’ve looked at:

$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

But my console.log doesn’t show a ajaxstart when the .search-filter-results-list is loaded. Is that correct?

So how will I know when to activate the fadeIn().

Also the little loader of the infinite scroll is aligned to the left, how can I center that? Probably very simple but I cant find what container is above .search-filter-scroll-loading so when I set width:100% the loader icon is way out of proportions 🙂

Trevor

#229818

The ajax event will only trigger when ajax is used by our form (on a submit), and not on page load. How are you loading the scrip to the page?

Anonymous

#230065

Hi (sorry for the late reply Christmas and stuff), I’ve got it to work. Thanks for the feedback. I’ve only have this issue:

Also the little loader of the infinite scroll is aligned to the left, how can I center that? Probably very simple but I cant find what container is above .search-filter-scroll-loading so when I set width:100% the loader icon is way out of proportions 🙂

Is there a way I can set the loader-icon styles and display it in the center of the container?

Trevor

#230095

Our loader icon is a simple addition to the page, so you may need to use some Custom CSS, or actually hide it entirely and make your own. Please see these two posts (from the same thread);

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/2/#post-127324

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/3/#post-128735

Anonymous

#230135

Hi Trevor,

Thanks that first like made it all work!

Trevor

#230139

Thanks for letting me know. I will close this thread for now.

[Author]

Posts