WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Infinite Scroll] not working?

[Resolved] [Plugin: Infinite Scroll] not working?

  • Hi there,

    I’m using the Infinite Scroll plug-in (http://wordpress.org/extend/plugins/infinite-scroll/) for my website http://nopantsnopants.com

    But it doesn’t seem to be working. Can anyone help me?

    The theme I’m using is Paragrams from WP Shower, and the selectors I have currently are:

    Content CSS Selector: #content
    Post CSS Selector: #content div.post
    Navigation Links CSS Selector: div.navigation
    Previous posts CSS Selector: div.navigation a:contains(Previous)

    I currently have the plugin only viewable for admin as it hasn’t been working, I also made all posts viewable on the front page (we’re a new site) for the mean time. Any tips?

Viewing 15 replies - 1 through 15 (of 23 total)
  • 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.

    http://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
    2. 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});
    3. 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:
      http://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).
    4. Hopefully it should start working!

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

    Let me know how it goes.
    -Sam

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Resolved] [Plugin: Infinite Scroll] not working?’ is closed to new replies.
Skip to toolbar