Infinite Scroll Pagination issue

  • samkittinger

    (@samkittinger)


    11 years ago

    Hey all, so being the idiot WordPress newbie that I am, I jumbled a makeshift theme together that didn’t include any sort of pagination. I wanted to use infinite scroll and realized I needed pagination in order for it to work. With all the googling and searching I did the best that I came up with was this: http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-without-a-plugin/

    I used the code there to make the most basic pagination there is. It works fine on it’s own (albeit I have no idea why it won’t style, not that it needs to be styled if infinite scroll is going to work in the end) and does it’s job, but now I’m trying to figure out how to make infinite scroll work with it. I’ve tried all sorts of selectors that seem like they’d work, but to no avail. Am I missing something?

    Here’s my site: http://samkittinger.com/bohshons

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    11 years ago

    The correct selector is window. You want to capture the scroll event for it. When a scroll happens, compare the window scrollTop dimension to the document height less window height. If the two are equal, the bottom has been reached. At some point before this, the scroll event handler should have made an AJAX request for the next page and appended it to the appropriate DOM element.

    Thread Starter samkittinger

    (@samkittinger)

    11 years ago

    I really appreciate the reply, and sorry in advanced, but I literally have no idea how to go about doing what you just said. If you could elaborate on which selector is the window etc etc, I would cry tears of joy and appreciation.

    Moderator bcworkz

    (@bcworkz)

    11 years ago

    “…cry tears of joy and appreciation” 😀 – jQuery coding is not something I’m comfortable with, but I was thinking something like this:

    $(window).scroll(function(){
    if  ($(window).scrollTop() > $(document).height() - $(window).height() - $(window).height() ){
       // make AJAX call for next page and append to container
    }
});

    This needs to be inside a no-conflict wrapper to work with WP. In this example, I decided one extra window height was enough buffer to fetch more content, so it is subtracted twice from the document height. The first window height subtraction is to equate scrollTop to the very bottom of the document, too late to fetch more content, thus the second height subtraction for earlier fetching.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Infinite Scroll Pagination issue’ is closed to new replies.