JQuery resizing div based on content

Question

I am curious if with Javascript and the jQuery library if I would be able to emulate something like Facebook or Twitter where when the scroll bar reaches a certain point and the height of a div is expanded and more data is shown. I am very new to the JQuery library, and I noticed there was a "resizeable" function. I know with CSS I could use overflow: auto; but I would just like something that looks a little nicer. If there are other options besides javascript as well I am curious which solution is the best.

Answer 1

The size of the div is not extended via javascript. When you reach the bottom of the page, new content is automatically loaded and inserted in the page, that's why it expands.

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

Answer 2

You do not need a infinite scroll plugin for this. With jQuery, you can simply do

$(window).scroll(function () { 
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
      //Add something at the end of the page
   }
});

Answer 3

Facebook uses AJAX to load the content in so it doesn't need to "expand" as such.

If you wanted to "emulate" it you could do this using the scrollTop() function: http://api.jquery.com/scrollTop/

eg

var topPos = $(window).scrollTop();
if (topPos < x) {
    // Do stuff i.e. "expand the div"
}

Answer 4

Yup there is. If you mean it's usually called infinitescroll: http://www.infinite-scroll.com/

That's what I used to emulate that loading thing. If you're using rails, it helps to also have the will_paginate gem for your pagination(infinitescroll hides this but uses the links generated to fetch the data)

Answer 5

The effect you are talking about is called Infinite Scroll pattern and is made popular by facebook, twitter etc. You can find details about its implementation here and here . You can also google for jquery infinite scrolling to find more plugins and implementations of the pattern.

Answer 6

You are probably looking for:

Infinite Scroll http://www.infinite-scroll.com/ the jQuery and Wordpress Plugins

jQuery Plugin: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/ currently: version 1.5.110106

Wordpress Plugin: http://www.infinite-scroll.com/installation/

https://github.com/paulirish/infinite-scroll