Is there an infinite scroll plugin with a download button more?

Question

Hi everyone knows, where can I get an infinite scroll plugin that has a button that you click before loading more messages?

that's what they need (look at the more button in the lower right corner)

Answer 1

On the jQuery infinite scroll plugin's documentation page :

In 1.4, you can force the loading of the next page of content on the will. First you disable the default behavior. Then run the next pull whenever you want.

// unbind normal behavior. needs to occur after normal infinite scroll setup. $(window).unbind('.infscr'); // call this whenever you want to retrieve the next page of content // likely this would go in a click handler of some sort $(document).trigger('retrieve.infscr'); 

It should solve your problem.

Answer 2

In the current version of Infinite Scroll Plugin (2.1.0), you can simply pause the loading of elements, and then resume and check whether you need to download new content by pressing a button (or something else):

 $('.container').infinitescroll({ // infinite scroll options }, function(){ // pause when new elements are loaded $('.container').infinitescroll('pause') } ); function resume_infinite_scroll(){ // resume $('.container').infinitescroll('resume') // check if new elements should be loaded $('.container').infinitescroll('scroll') } 

and then

 <button onclick="resume_infinite_scroll()">load more</button> 

Answer 3

If you are looking for endless scrolling, this is one thing, but only the More button does not require a plugin.

HTML

 <div id="items"> <!-- Run your query using the page parameter to offset items, then display the items here --> </div> <button id="more">More</button> 

Js

 var page = 0; $('#more').click(function(){ page++; $('<div/>').appendTo('#items').load('the/same/url/?page='+page+' #items'); }); 

The .load function will make an AJAX call to the specified URL, and an additional selector will simply pull out that particular element. In this case, if the parameter? Since the page on your display page controls the offset of the request in order to pull out the necessary elements, the next set of elements will be added when loading the URL each time it is called.

Of course, you can create a unique AJAX page that simply returns HTML snippets for the next set of elements, but it depends a bit more on your architecture. However, you will save bandwidth / runtime by doing this.

Answer 4

Basically you should have css overflow: scroll , and the bigger the button should add more html to your div container using jquery append - http://api.jquery.com/append/