Selectors in Infinite-Scroll

I get asked a lot how/what the selectors are in infinite-scroll and how to figure them out. So lets start from the beginning.. infinite-scroll uses jQuery selectors (which are based on CSS selectors) to find content and posts in order to load the content from the next page. Because web pages are different, we need to define ourselves what selectors infinite-scroll should use.

Infinite-Scroll uses four selectors, these are:

  • nextSelector
  • navSelector
  • contentSelector
  • itemSelector

It’s probably easiest if you check out my beautiful diagram below to see what they relate to:

And now finally we get to some code (its kind of unavoidable..), you need to look at your site. (easiest way is by going to the homepage, right click and choose view source).

We’re looking for something like this:

<div id="content">
<div class="post">This is my post 1, it has a lot of content in it about Bananas...</div>
<div class="post">This is my post 2, it has a lot of content in it about Bananas...</div>
<div class="post">This is my post 3, it has a lot of content in it about Bananas...</div>
<div class="post">This is my post 4, it has a lot of content in it about Bananas...</div>
</div>
<div id="navigation">
<div class='next'>
<a href='/page/2/'>Next Page</a>
</div>
</div>

In jQuery/CSS if we want to select something by its ID we use ‘#’, if we want to select something by its class we use ‘.’. And finally if we want to drill into something we leave a space… see my selectors below and hopefully you’ll get it! Selectors for above:

  • nextSelector: #navigation .next a:first
  • navSelector: #navigation
  • contentSelector: #content
  • itemSelector: #content .post

Hope you enjoyed reading my self-help guide on getting to know your selectors! If you need any help just leave a comment or (preferably) open a ticket in the wordpress forums or infinite-scroll site.

10 thoughts on “Selectors in Infinite-Scroll”

  1. Hi there, I am trying to implement the infinite scroll on our staging server staging.bangstyle.com, it works but I want to know whats the best way to implement it when we have 2 loops on the main page. 1 loops a specific category and the other loop is querying all the rest except the first one. It seems its working but loads some weird stuff, it could be we have small amount of articles but any help appreciated.

  2. Hi Nicholas, Just so I understand, you want it to infinitely scroll within a box somewhere on the page and then also if the user scrolls on the main page? To do that I think you’d need to initiate an extra instance of infinite-scroll and use the local mode behaviour (https://github.com/paulirish/infinite-scroll). I’m real busy at the moment so won’t have time to fully code it for you but can certainly give pointers. Email me if you want any help: Email

  3. Hey,

    Was wondering if you knew how to stop the Next Selector from disappearing after it is clicked on. I have Infinite Scroll set up so you hit more before it loads and want the user to be able to hit a Next button to add four more images at a time.

    Everything works perfectly but that damn Next link is changed to display:none.

    Here is my script.

    $container.infinitescroll({
    navSelector : ‘.navigation’,
    nextSelector : ‘.previous a’,
    itemSelector : ‘.box’,
    loading: {
    finishedMsg: “No more Images to load.”,
    img: “http://i.imgur.com/qkKy8.gif”,
    msgText: “Loading Images…
    },
    },

    function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function() {
    $newElems.animate({ opacity: 1 });
    $container.isotope( ‘appended’, $newElems );
    });
    }
    );

    jQuery(window).unbind(‘.infscr’);

    jQuery(‘.previous a’).click(function(){
    jQuery(‘#content-masonry’).infinitescroll(‘retrieve’);
    return false;
    });

  4. @Steven Goetz
    Sorry for the long time in replying, have been really busy recently. Unfortunately because of other commitments with other developers as well, infinite-scroll hasn’t been looked after as it should!
    I presume you’re using the code from Github (rather than WordPress) which is good and should include a folder called “behaviours” in there is a load of different files that override and produce certain behaviour. You’ll want to be using the “twitter” style manual-trigger.js .
    To use it you just include the file after infinite-scroll so:
    src=”infinite-scroll.js”
    src=”manual-trigger.js”
    Or however you are loading the script (you get the point).
    Afterwards you simply enable the behaviour in your options, so in your case it’d be something like:
    navSelector : ‘.navigation’,
    nextSelector : ‘.previous a’,
    itemSelector : ‘.box’,
    behaviour: ‘twitter’,

    The twitter behaviour binds to the nextSelector button, doesn’t bind to scrolling and never hides the navSelector. (Which is what you want as presumably the nextSelector will be in the navSelector!). This means you can remove the parts where you unbind .infscr and bind the click function.

    Unfortunately its pretty much undocumented at the moment which really isn’t good and hopefully can be fixed up in the future. Let me know how it goes!

  5. Thanks a lot! I found it very difficult to know what code I was to include and you clarified it greatly.

    Here is the script I used to create a isotope/infinite scroll/inview jquery archive page in wordpress. Pretty slick. The user hits a button to add more items, the items organize themselves in a centred masonry grid, and it is responsive to boot. I will share the link after I make it live.

    Thanks again for your help.

    $(function(){

    var $container = $(‘#content-masonry’);

    $container.imagesLoaded( function(){
    $container.isotope({
    itemSelector : ‘.box’
    });
    });

    $container.infinitescroll({
    navSelector : ‘.navigation’, // selector for the paged navigation
    nextSelector : ‘.previous a’, // selector for the NEXT link (to page 2)
    itemSelector : ‘.box’, // selector for all items you’ll retrieve
    behavior: ‘twitter’,
    loading: {
    finishedMsg: ‘Thats All Folks’,
    img: ‘http://i.imgur.com/qkKy8.gif’
    }
    },

    // call Isotope as a callback
    function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function() {
    $newElems.animate({ opacity: 1 });
    $container.isotope( ‘appended’, $( newElements ));
    });
    }
    );

    });

    $.Isotope.prototype._getCenteredMasonryColumns = function() {
    this.width = this.element.width();
    var parentWidth = this.element.parent().width();
    // i.e. options.masonry && options.masonry.columnWidth
    var colW = this.options.masonry && this.options.masonry.columnWidth ||
    // or use the size of the first item
    this.$filteredAtoms.outerWidth(true) ||
    // if there’s no items, use size of container
    parentWidth;
    var cols = Math.floor( parentWidth / colW );
    cols = Math.max( cols, 1 );
    // i.e. this.masonry.cols = ….
    this.masonry.cols = cols;
    // i.e. this.masonry.columnWidth = …
    this.masonry.columnWidth = colW;
    };
    $.Isotope.prototype._masonryReset = function() {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn’t have to call this again
    this._getCenteredMasonryColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i–) {
    this.masonry.colYs.push( 0 );
    }
    };

    $.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
    };
    $.Isotope.prototype._masonryGetContainerSize = function() {
    var unusedCols = 0,
    i = this.masonry.cols;
    // count unused columns
    while ( –i ) {
    if ( this.masonry.colYs[i] !== 0 ) {
    break;
    }
    unusedCols++;
    }
    return {
    height : Math.max.apply( Math, this.masonry.colYs ),
    // fit container to columns that have been used;
    width : (this.masonry.cols – unusedCols) * this.masonry.columnWidth
    };
    };

  6. Hi!
    It is possible to use manual trigger and infinite scrolling on same page for different loops ? Like I want the manual triggering on siderbar…
    Thank you for your answer!
    m.

  7. Hi, Thanks for great work. The only problem that i’m facing is that how can i use plugin for two pages template with different css

    format for first is:
    ‘nextSelector’ => ‘#nav-below a:first’,
    ‘navSelector’ => ‘#nav-below’,
    ‘itemSelector’ => ‘.post’,
    ‘contentSelector’ => ‘#content’,

    Format for Second is:
    ‘nextSelector’ => ‘#nav-below a:first’,
    ‘navSelector’ => ‘#nav-below’,
    ‘itemSelector’ => ‘#left.post’,
    ‘contentSelector’ => ‘#content #left’,

    thanx for your help …

  8. Sorry to post this here, but I couldn’t find anywhere to put it. Is there any way to download your xreadme generator?

  9. Hi Reap3r119, unfortunately that project closed a long time ago (~2006!) back before Github etc so have since lost the source. It was pretty simple though and just automated formatting etc, sorry!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>