Infinite Scrolling not working (Jetpack or others)


#1

Hi there,

First of all, nice looking and easy to use Wordpress theme. Probably the first I actually enjoy working with for years. Great job :slight_smile:

I am currently working on infinite scrolling (loading or button, doesn’t really matter) for my blog and categories pages, but I just can’t make it work. I tried several widgets or Ajax codes and it seems there is always a different issue : not showing button, not loading …

The only one (kind of) working is Jetpack, but problems remain.

With button, next posts are loading without thumbnail (+ some spacing issues), as shown on this screenshot. Note that URl is also changing while scrolling down (Blog, Blog/2, Blog/3), as if I was jumping to next page.

With autoload config, it is even worse : lots of duplicate posts, without thumbnail, are showing
=> http://lavoixdesnicois.com/screenshot_infinite_scroll.png

If you can help in any way, I would greatly appreciate it :slight_smile:


#2

Hello there,

Please a link to your page where infinite scrolling enabled on, so I can inspect what’s actually causing you this problem.

You can also troubleshoot it yourself by temporarily switching to one of default WordPress themes. If the issue remains, it’s indicating that the issue isn’t with Greatmag theme. There could be something else, might be plugin conflict. Then you should disable all other non-required plugins. Then re-run your test once again.

Regards,
Kharis


#3

Hi,

After troubleshooting it a bit myself, it appeared the issue is linked to the Masonry (grid or full width) layout : everything is working fine with List and Classic layout. I deactivated every plugin one by one, but it didn’t seem to provide any solution.

Working locally, I can’t send you a link of the concerned pages for now, but I will be pleased to share some code if needed.

Thanks.


#4

Hello there,

It looks like it need more deeper inspection on my local site as well. Thank you for pointing that out. I’ll get back to you soon.

Regards,
Kharis


#5

Hi,

I worked a bit on it this week, I found the answer by myself.

Not sure it is the cleanest solution but I added the following custom CSS

.infinite-wrap .media-left {
    display: table-row;
    vertical-align: top;
}

.infinite-wrap .absp-cat {
    left: 15px;
}

.hentry {
    padding: 0 15px 45px;
    background-color: #fff;
}

Now, I have to figure how to get rid of the pagination problem (URL jumping to page 2 while infinite scrolling). If you have any idea about it :slight_smile:

Thanks a lot.


#6

Hello there,

I am sorry for the long delay. I found there’s an issue with infinite scroll while masonry grid layout enabled. To fix it, this simple CSS code could be enough:

    .infinite-wrap .media-left {
    	display: block;
    }

    .infinite-wrap .hentry {
    	padding: 0 15px;
    } 

Regards,
Kharis