How to find below fold in javascript?

JavaScript
1

Hi,

I have around 100 item details in a page…i want to show it only 18 item details on page load. and the remaining items needs to be displayed only when user scrolls down the page to end. Can someone please let me know how to find out below fold in javascript?

Thanks,
Shanmugapirya V.

2

I wrote some code a while ago that will calculate how far down an element is from the top of the document:

function getTotalOffsetTop(object){
	var retval = 0;
	do{
		retval += object.offsetTop;
	}while (object=object.offsetParent);
	return retval;
}

You could combine this with the following functions from Stephen Chapman to find the first element that is “below the fold”:

JavaScript Detection of Browser Window Size and Position

If you wanted to find the first of a set of elements that is below the fold, using Stephen Chapman’s pageHeight() function combined with my getTotalOffsetTop() function, you could do this:

// Make an array (or node list) containing references to all of the elements to test:
var objects = document.getElementsByTagName("li");

// Cycle through the elements until we find one that is not visible:
var firstBelowFold;
for(var i=0; i<objects.length; i++){
	if( getTotalOffsetTop(objects[i]) > pageHeight() ){
		firstBelowFold = objects[i];
		break;
	}
}

// Now the variable firstBelowFold contains a reference to the first element that is
// below the bottom of the visible screen.

If you’re adding elements by AJAX calls, you could append an element to your container and then test to see if it is below the viewable screen. If it’s above the fold, then keep going and append the next element; if it’s below the fold, you can stop. You’d then put a listener on the “scroll” event that tests to see if the last appended element is visible, and if it is, then append a new one.

Hope this helps!