I am attempting to implement a scrollable div on my webpage that can continuously load content. I am currently using the following code snippet for this -->
http://jsfiddle.net/cyrus2013/Qq85d/$(document).ready(function(){
function loadMoreContent()
{
$('div#lastPostsLoader').html('<img src="../bigLoader.gif">');
$.get("loadmore.php", function(data){
if (data != "") {
//console.log('add data..');
$(".items").append(data);
}
$('div#lastPostsLoader').empty();
});
};
//loadMoreContent(); $(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
//console.log('scroll bottom');
loadMoreContent();
}
}); });
However, the code provided is meant for implementing this functionality across the entire page, while I specifically need it for a particular 'div' within the webpage.
In this section of the webpage, I am facing challenges in determining the dimensions of the 'div'.
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;
An example of what I am trying to achieve is similar to the "Ticker" feature on Facebook, where updates are displayed in real-time on the right side of the screen.
I would appreciate any help in figuring out the necessary code for this requirement. Thank you in advance!