We have all seen the automatic content loading used in Facebook. Let’s see how easily it can be implemented using jQuery.
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.
}
});
.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
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!
What about the ajax_processor.php file? What does it contents?, btw great post.
@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
Would this work in an iFrame – ie a Facebook application?
Thanks
what will happen when the content is finished.
In the case of this example, the content will neverffinish, as we are dynamically generating content.
But in my case, the content will finished. Could you pls help me to solve this situation.
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.
It is working on mobile version or not??
It worked on Firefox in my Firefox OS simulator. So it should work in the Firefox OS device also. Haven’t checked in Android.
its not working in iphone. what can i do. please reply me asap.
See this http://stackoverflow.com/questions/8220267/jquery-detect-scroll-at-bottom
no its not working properly but i found a solution for iphone by using this code :
if ($(window).scrollTop() >= $(document).height() – $(window).height() – 60) {
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.
thanks you !
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
where is down option and code
This is the best solution! No need other jQuery plugin to do this. You save my day. Thanks for sharing!
Awesome.!
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…
where is the link to download this?
There is nothing to download. Just copy and use the 5 lines of code given in the post. If you need to see how to use it, see the demo page (https://rebugged.com/code/auto-content-loading-on-scroll/) and view its source.