Infinite Scroll with masonry

Anonymous

#227480

Hello there,

Please could I get your help with something, I basically have Infinite Scroll with Masonry.

My code is:

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

And if I use usual pagination, all works fine, but when I use infinite scroll the second set of results load on top of the first set.

I also set the Infinite Scroll all accordingly with the post result selector and container settings.

I have done a search in Google and saw some suggestions but wasn’t sure they were exactly my case, so thought best to check with you :).

Many thanks,
TJ

Anonymous

#227481

This reply has been marked as private.

Trevor

#227569

Hi. I am having a problem, in that the link you give is re-directing to the home page?

When I edit that insights page in the admin editor, it is empty?

Did you add this script to the page (with the ID changed to your Post Grid ID):

(function ( $ ) {
	"use strict";
	/* Replace the ID <code>123456</code> with the ID of your grid */
	var my_grid_id = '#post-grid-123456'; //alternatively use <code>.post-grid</code> for a less targeted approach
	
	var $my_grid = {};
	var $grid_items = {};
		
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			if($grid_items.hasClass("masonry")){
				$grid_items.removeClass("masonry");
				$grid_items.masonry('destroy');
			}
			$grid_items.removeAttr('style');
			$grid_items.masonry({isFitWidth: true});
		}
	});		
}(jQuery));

If on its own and inline, it needs to be in script tags.

Anonymous

#227571

Hi Trevor,

Thanks ever so much for your quick reply as always :).

[section redacted by @trevorsf]

Ah so your code I think is for use with the Post Grid plugin, but we don’t use that, we use our own Masonry integration, which as I say if we use paging, the code we add seems to re-fire it, but it’s just when we use Infinite Scroll, you will see what it does once logged in as Admin and hopefully you can let me know what we need to do 🙂

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

Thank you again,
Tonya

Trevor

#227576

Ah, you have coded the grid yourself, and used Masonry?

This post from Ross shows how to (generally) re-trigger Masonry after our Ajax call:

https://support.searchandfilter.com/forums/topic/reload-masonry-grid-after-ajax-call/#post-165867

Anonymous

#227616

Hi Trevor,

Thank you for this, so yep I’m already re-calling Masonry after your Ajax call, which usually always works, as we’ve used this loads with your plugin, the only difference on this one is that we’re using Infinite Scroll vs. Paging, and I think that’s where, for some reason, it’s not quite happy. If I change it to paging it works fine, but can you see on Infinite Scroll it loads the items on top of each-other?

This is the code which I did update to be more exact to Ross’s example, but sadly still no luck as it was doing the same as what we already had before (and like I say which does re-trigger it fine on paging):

		function loadMasonry(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-item',
	            percentPosition: true
	        });
		}
		
		loadMasonry();
		
		$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
			console.log("ajax complete");
			loadMasonry();

		});

Hope that helps :).

Many thanks,
Tonya

Trevor

#227784

I think you need some more code, somewhere. I am sorry, but I am far from expert with Masonry. However, look at the CSS being applied after the scroll:

https://www.screencast.com/t/y7gYIQxseK

The 925px is being re-applied. It is there when the first set of results is shown, and is added again when you scroll. That means that there is no room for the posts.

See how the first set of posts has the position CSS added, but the subsequent posts, when loaded, do not?

Anonymous

#227872

Hi Trevor,

Ahh thanks ever so much for this, so I adjusted the code and now added the reload bit, which in Ross’s example it says we might need it… and so I think we did hehe, sorry should have tried that before!!

So… this is now the code:

		function loadMasonry(){

			//$container will always be a new copy
			var $container = $('.grid-masonry');
			
			// running images loaded again after page load / ajax event 
			// $container.imagesLoaded(function () {
				// INITIALIZE MASONRY
				$container.masonry({
					itemSelector: '.grid-item',
					columnWidth: '.grid-item',
					percentPosition: true
				});
				// Masonry has been initialized, okay to call methods
				
				// not sure if you will need this here but might be worth adding in
				$container.masonry('reloadItems');
			// });
		}
		
		//if you need to call on page load etc...
		loadMasonry();
		
		//then also call it after ajax event
		$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
			console.log("ajax complete");
			loadMasonry();

			$('.link-scroll').bind('click',function(e){
				var $anchor = $(this);
				$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1500,'easeInOutExpo');
				e.preventDefault();
			});

		});

So, almost there, the only tiny thing I am seeing is as you scroll it initially puts the posts on top of the existing ones, then as you scroll corrects itself [section redacted by @trevorsf]

Do you any little adjustment I can make to stop that?

Then I think all is perfect, so thank you again for your brilliant support! Don’t know what we’d do without your plugin, we use it on all sites, best out there as far as we’re concerned :)!!

Many thanks,
Tonya

Trevor

#227880

What I would do is add some code to fade the div to 0 opacity, and then fade it back after the ajax.

Anonymous

#228405

This reply has been marked as private.

[Author]

Posts