views:

1320

answers:

5

When you search for images on the Bing search engine, the result is displayed like this:

http://www.bing.com/images/search?q=stack+overflow

Notice how you can keep scrolling and scrolling and there is not "normal" paging.

My question is: How do they do this? I can see there is some ajax/javascript events happening, but the code is not easy to read. I especially would like to know how they know when an "empty box" is inside the users view port.

+1  A: 

Here's an article about that technology :

Eliminate paging results by using JavaScript (ala DZone) : Using Javascript, prototype and PHP.

Moayad Mardini
+1  A: 

After some searching and reading I found this very good site:

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

It includes downloadable WordPress and jQuery -plugins and also explains pros/cons of using "Infinite scroll/autopagerize/unpaginate/endless pages"

Sample pseudo/jQuery code to load more data when user has scrolled all the way to the bottom:

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           loadMoreRows();
        }
});
Espo
+1  A: 

This feature is often called "infinite scrolling". Searching for infinite scroll javascript turns up a number of articles/posts on how to do this. Some of the more interesting ones:

Laurence Gonsalves
A: 

Today I found a jQuery plugin that does the same scroll as Bing/Live Search:

http://blog.yctin.com/archives/jquery-plugins-ajaxscroll/

It was designed to remove the need for Next/Previous buttons.

Espo
A: 

Scott Hanselman has a nice blog post about this: Infinite Scrolling

Odi - Xceed
Might as well mention, if you want to see a couple of demos of infinite scrolling pushed to the limits... 1) If you have Silverlight installed, check out this Netflix online catalog demo http://snurl.com/netflixdemo and if you have WPF 3.5 installed, 2) http://xceed.com/bingbling
Odi - Xceed