New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twitter style load not working #204

Closed
rctneil opened this Issue Jul 29, 2012 · 16 comments

Comments

6 participants
@rctneil
Copy link

rctneil commented Jul 29, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 3, 2012

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>
  1. 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

This comment has been minimized.

Copy link

rctneil commented Aug 3, 2012

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

This comment has been minimized.

Copy link

rctneil commented Aug 3, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 3, 2012

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

This comment has been minimized.

Copy link

rctneil commented Aug 3, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 6, 2012

@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

This comment has been minimized.

Copy link

rctneil commented Aug 6, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 7, 2012

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

This comment has been minimized.

Copy link

rctneil commented Aug 7, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 7, 2012

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

This comment has been minimized.

Copy link
Contributor

alexsegura commented Aug 10, 2012

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

This comment has been minimized.

Copy link
Contributor

samcleaver commented Aug 12, 2012

@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 comment has been minimized.

Copy link
Contributor

67726e commented Oct 25, 2012

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

@67726e 67726e closed this Oct 25, 2012

@alexsegura

This comment has been minimized.

Copy link
Contributor

alexsegura commented Oct 25, 2012

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

This comment has been minimized.

Copy link

demssite commented Dec 3, 2012

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

This comment has been minimized.

Copy link

selva5682 commented Dec 4, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment