Facebook Like Automatic Content Loading on Scrolling

We have all seen the automatic content loading used in Facebook. Let’s see how easily it can be implemented using jQuery.

View Demo

What we do to achieve this is whenever a scroll event is fired, check if we have reached the bottom of the page, and if we are at the bottom, call our ajax function to load the content.

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        // Reached page bottom. Call the ajax function or any other foo here.
    }
});

$(document).scroll(function(){

if ($(window).scrollTop() + $(window).height() == $(document).height()) {

// Reached page bottom. Call the ajax function or any other foo here.

}

});

.scroll() is fired every time the user scrolls the page.
$(window).scrollTop() returns the number of pixels hidden ‘above’ when the page is scrolled.
$(window).height() gives the height of the window. Same as window.innerHeight
$(document).height() gives the total height of the page.

Well, that’s that. Cool, right?

Automatic Content Loading in Facebook

Incoming search terms:

Eduardo Oliveira

Worked good to me. I had used some part from this too: http://tomsbigbox.com/wordpress-load-more-posts-on-page-scroll/
all php was from there (because i wanted to load wordpress posts), and i had used the “halfway” variable too and to load post in the middle of the page, not in the end only.
Your post was very useful to me, thank you!
George

What about the ajax_processor.php file? What does it contents?, btw great post.
Saurabh

@George, thanks 🙂 ajax_processor.php is just a simple file that generates random paragraphs of text and outputs it. I put it so new random content is shown each time page is scrolled. Try opening that file in browser here -> http://rebugged.com/code/auto-content-loading-on-scroll/ajax_processor.php
Rich

Would this work in an iFrame – ie a Facebook application?

Thanks
Chayan

what will happen when the content is finished.
Jsx

In the case of this example, the content will neverffinish, as we are dynamically generating content.
Chayan

But in my case, the content will finished. Could you pls help me to solve this situation.
Jsx

If you are using a limit query to fetch the content, once the content is finished, the limit query will be returning null. So you can check if the ajax call is returning null or empty string and do the appropriate action.
Mairaj Saifi

It is working on mobile version or not??
Jsx

It worked on Firefox in my Firefox OS simulator. So it should work in the Firefox OS device also. Haven’t checked in Android.
Mairaj Saifi

its not working in iphone. what can i do. please reply me asap.
Jsx

See this http://stackoverflow.com/questions/8220267/jquery-detect-scroll-at-bottom
Mairaj Saifi

no its not working properly but i found a solution for iphone by using this code :

if ($(window).scrollTop() >= $(document).height() – $(window).height() – 60) {
Jsx

What is that “60”? Be careful anyway, as it probably this will stop working correctly when the screen size or something change. Thanks for sharing.
Pingback: Datenbankinhalte erst bei Bedarf laden - php.de()
vannaibell

thanks you !
Noman

i am trying to using AJAX in my website where products should be love when user goes end of page.

But it doesn’t work
any One
help me
Prakesh

where is down option and code
Richard

This is the best solution! No need other jQuery plugin to do this. You save my day. Thanks for sharing!
Hemz

Awesome.!
Fábio Monteiro

How is your loadMore php code? I’m doing the same thing, but I’m with a little bit trouble my content is cloned when I update it…I’d like to know how I don’t clone the actual content…