Infinite scrolling inside a div with AJAX (jQuery) loaded date

Question

I\'ve been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I\'m giving up.

What I\'m tryin

Answer 1

If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:

$('.mydiv').infinitescroll({
     binder: $(".name-of-div")  

The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page

Answer 2

There are some plugins which do this for you quite well.

http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/

EDIT: Some more up to date plugins:

https://github.com/fredwu/jquery-endless-scroll

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Answer 3

Use the JQuery.load() method to grab some html content and then insert it into an html element.