Twitter style load not working

[rctneil]

Hey,
Whatever I try to do, I cannot get the Twitter style "Load More" functionality working. It works normally on scroll though.

My JS is:

$('.photos').infinitescroll({

  navSelector  : ".pagination",
                 // selector for the paged navigation (it will be hidden)
  nextSelector : ".pagination .next_page a",
                 // selector for the NEXT link (to page 2)
  itemSelector : ".photos .photo"
                 // selector for all items you'll retrieve
});

// kill scroll binding
$(window).unbind('.infscr');

// hook up the manual click guy.
$('.here').click(function(){
  $(document).trigger('retrieve.infscr');
  return false;
});

// remove the paginator when we're done.
$(document).ajaxError(function(e,xhr,opt){
  if (xhr.status == 404) $('.here').remove();
});

Any thoughts?

Neil

[samcleaver]

Hi Neil,

The documentation on the infinite-scroll site is really out of date, apologies! Its actually gotten easier to have the twitter load more functionality. When you download infinite-scroll you'll notice there is a folder called "behaviors". This folder contains a variety of common behaviors wanted by users, one of those being manual triggering (twitter style). To enable it you simply do the following:

1. Include the behavior after infinite-scroll, for example:

<script type="text/javascript" src="js/infinite-scroll.js"></script>
<script type="text/javascript" src="js/behaviours/manual-trigger.js"></script>

2. Add the "behavior" option:
   javascript behavior: 'twitter'

This takes care of all the binding stuff so your final code would just be:

$('.photos').infinitescroll({

  navSelector  : ".pagination",
                 // selector for the paged navigation (it will be hidden)
  nextSelector : ".pagination .next_page a",
                 // selector for the NEXT link (to page 2)
  itemSelector : ".photos .photo",
                 // selector for all items you'll retrieve
  behavior: "twitter"
});

[rctneil]

Thanks for the update.

Ok, Where or what defines the element I want the user to click to start the manual trigger? and how does that get hooked up?

Neil

[rctneil]

Update:

I have it triggering on demand but for the nextSelector I had a create a separate link outside of the pagination to go to the next page and use that selector.

How can I make that link hide once the last results have been appended?

[samcleaver]

Just tested, looks like an oversight in the behaviour. I'll try and get it into the repo over the weekend.
To be honest the positioning of the navSelector/nextSelector doesn't really matter when using manual triggering but just be sure that the nextSelector is within the navSelector. (even if that means changing your navSelector).

[rctneil]

If I make sure the nextSelector is inside the navSelector then it doesn't work for me. But it does when it's a separate next link outside of the navSelector.

I just need a way for the pagination to be hidden, the next selector element needs to be styleable (which it will be) and the nextSelector to be hidden at the end.

Looking forward to see commits over the weekend so I can finally get this functionality working perfectly on my site.

Thanks for your help!

[samcleaver]

@rctneil Just made commit to the manual trigger behaviour. Essentially it just now just hides the navSelector when the end of content is reached. This is the same behaviour as what automatic scrolling would do (but obviously automatic scrolling hides the navSelector when initially setup rather than at the end of the content). I've tested on my local setup and it works fine (really simple fix). If it doesn't work on yours then could you let me know the URL (or give a full example with HTML) so I can help you debug.

Give it a whirl and let me know how it goes:
https://raw.github.com/paulirish/infinite-scroll/master/behaviors/manual-trigger.js

[rctneil]

Hey,

Thanks for the update.

It sort of works but i'm getting confused as to what selectors to use. I ahve the following currently:

$('.photos').infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : ".pagination",

  // selector for the NEXT link (to page 2)
  nextSelector : ".pagination .next_page a",

  // selector for all items you'll retrieve
  itemSelector : ".photos .photo",

  behavior     : 'twitter'
});

The navSelector is my set of pagination links - This doesn't start with being hidden as I expect it to?

The nextSelector points to the next link inside the pagination - Therefore should be hidden on page load.

So, if both the above should be hidden, What element (and how) does the user click to trigger the auto content stuff?

Neil

[samcleaver]

Generally speaking navSelector is the box that contains prev/next buttons or pagination (and inherently the nextSelector). Usually when using automatic mode we hide the entire box as its unneeded. When using manual mode, we don't hide the box as it contains the nextSelector which is used to trigger loading the next page.

You're implying that you have pagination on the site. The best solution would probably be to either remove the pagination (and just have the prev/next buttons) or, at page load, transform so it looks suitable for infinite scrolling. So removing everything in that box apart from the nextSelector (and optionally making the nextSelector bigger). Its really up to how you want to implement it.

[rctneil]

Thanks. Working nicely now. Next job is to find out to how to make Fancybox 2 reload or update itself to account for new images being added.

[samcleaver]

Glad to hear it, you can use a callback like so:

$('.photos').infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : ".pagination",

  // selector for the NEXT link (to page 2)
  nextSelector : ".pagination .next_page a",

  // selector for all items you'll retrieve
  itemSelector : ".photos .photo",

  behavior     : 'twitter'
}, function(newElements,data) {  
//Your code here
} );

But you'll have to contact the Fancybox 2 developer or check out their docs on what exact code to use to reload it.

[alexsegura]

Hi,

I bookmarked this issue, this is like documentation.

@Beaver6813, are you the owner of this repo now ?
I have been looking for an infinite scroll plugin, infinite-scroll looks like the most advanced and mature one, but it lacks documentation.

Can we make pull requests to update the README with some up-to-date examples ?

[samcleaver]

@alexsegura I agree, there are a lot of open issues on this project that could probably be resolved with good documentation. There was a proposal a while ago to organise some documentation in a Github wiki format but it never happened.. (#65)

If you could contribute any documentation that would be great and it'll be gladly pulled. If you could start the ball rolling I'll try and get some material in as well when I find some time! Paul's still the owner of this repo but is working on a lot of different projects so hasn't been very active of late so I'm looking after it where I can :)

[67726e]

This issue is resolved. The problem of documentation will be handled with the ticket #65

[alexsegura]

I sent a poor pull request yesterday with 2 examples in README

#245

I can help on describing some options. Let's speak on other thread ?

[demssite]

Hi, I've got this js code:

    $('#recent-activity-list').infinitescroll({
        navSelector  : '#more_content',
        nextSelector : '#more_content a',
        itemSelector : '.recent-activity-elm',
        loadingText  :  'Cargando contenido',
        loadingImg   : 'assets/img/template/ajax-loader.gif',
        donetext     : 'No hay más contenido.',
        behavior     : 'twitter',
        debug        : true
    });

And have read what you said above, but still not working. In the main html file i have:

    <!-- Infinite Scroll plugin -->
    <script src="assets/js/jquery.infinitescroll.min.js"></script>
    <script src="assets/js/behaviours/manual-trigger.js"></script>

It works like with no button to charge. I mean it works as infinite scroll not twitter style.

Thanks in advance.

[selva5682]

The below code is working fine:

jQuery('#next a').click(function(){
jQuery('ul#infinite').infinitescroll('retrieve');
return false;
});
the biggest problem was the .infscr which shouldn't be there.. Hope it helps someone else..

Documentation-like solution:

jQuery("#clickable_element").click(function(){
jQuery('#main_content_container').infinitescroll('retrieve');
return false;
});
Note:
You may have to add the manual trigger behavior if you are working with masonry or isotope in order to make it work. Just include manual-trigger.js after infinitescroll and pass the behavior by passing behavior: 'twitter' when calling the plugin.