[Plugin: Infinite Scroll] not working?

Hi sarasavage,

You can’t make all the posts viewable for use with this plugin. You have to limit the number of posts shown from the Settings > Reading page so that you actually have paged archives. The navigation links CSS selector has to be generated in order for the plugin to work.

Try only making three or four posts show in the “blog pages show at most” on the Settings > Reading page and see what happens.

Also, your CSS might be wrong:
div.navigation a:contains(Previous)

On your site, it looks like it starts with “div.nav”, but I’d need to see the page with fewer posts being displayed to actually see the CSS for the links…

Good luck.

Hi alturnwall, thanks for the quick reply. I’ve changed the settings so that 9 posts show (3 rows of posts) on the front page. It still doesn’t work – but perhaps it’s easier for you to see now what I need to do? Any more advice?

Thanks in advance

Sara

Try making these the values for the selectors:

Content CSS Selector: .li_container
Post CSS Selector: .article
Navigation Links CSS Selector: #nav
Previous posts CSS Selector: #nav #navleft a

(note the “.” period which precedes the names for the classes)

I made those the values and it still doesn’t work! ??

Any other ideas?

Maybe try

Post CSS Selector: li.article div

Also, did you change the “Infinite Scroll State” to “ON” and “scrolling behavior” to “automatic”?

Hmmm yep, those settings are as you mentioned!

I just changed the Post CSS Selector as per your suggestion and still nothing ??

Any other ideas…?

Did you ever get it to work? I’m having the same issue right now

Hmm. I can’t really think of anything else to diagnose unless I were to really dig into your specific code.

But, have a look here.

Although that’s the non-WordPress plugin version, it might shed some light on the settings you may need to change to get it working. I suspect it might be an issue with the Panagrams theme here. You may look into changing the “bufferPx” setting in the .js file to be a larger number, since that will fire the script sooner on the page.

Good luck ??

@sarasavage Could you turn on Debug mode please? (That way it prints in console what the problem is ?? ) Its loading on the page which is a good start (normally the harder issue to fix).

Content CSS Selector: .li_container
Post CSS Selector: .mcol
Navigation Links CSS Selector: #nav
Previous posts CSS Selector: #nav #navleft a:first

Almost the same as what @alturnwall made it but I’ve chosen to select the three columns you’re using as posts instead, hopefully they’ll stack nicely when it loads them..
Though it should have worked with the previously suggested selectors anyways… I think we need Debug set to On to help further ??

If I may chime in ??

I’m using the same theme as sarasavage, I made the corrections you suggested beaver and alas it’s still not working.

I’ve turned on my debug mode, but the java console is not logging anything (?).

Oh yeah my site is depensesfolles(.)com (it’s in French)

@ptremblay Hmm, very weird, I don’t see any initialization messages. Could you email me a list/screenshot of the WP plugins you’re running please? I’ll try install the theme/same setup on the weekend to try and fix.

https://beaver6813.com/contactsi_contact_form/

That’s very nice of you! Just sent you a screenshot

hi beaver6813, thanks for the reply! i have turned debug mode ON like you said, and changed the selectors to what you suggested but to no avail – it’s still not working ??

i have also sent you a screenshot of the plugins i’m using via your contact form.

You guys sure know how to pick the hard themes! The “columnizer” javascript the site uses makes it really difficult to implement infinite-scroll but it can be done:

1. First, set the following selectors:

• Content Selector: #outer > .li_container:first
• Posts Selector: .li_container > .mcol, #outer > ul.mcol
• Navigation Selector: #nav
• Next Page Selector: #nav #navleft a:first

• Next add the following to the “Javascript to be called after posts load” box
  jQuery(newElements).makeacolumnlists({cols: 3, colWidth: 0, equalHeight: 'ul', startN: 1});
• Finally, because columinzer is determined to muck up the markup, we have to delay initiating infinite-scroll slightly (100ms). I don’t want to introduce the delay into the main plugin (really its the themes problem) but you can use this patched file:
  https://beaver6813.com/dev/inf-custombrew/infinitescroll.init.js.php.zip
  Just download, remove the .zip extension and upload to wp-content/plugins/infinite-scroll (overwrite the existing file).
• Hopefully it should start working!

I tested on my mockup at https://beaver6813.com/infwp/

Let me know how it goes.
-Sam