SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    0 Post(s)
    0 Thread(s)

    How to find below fold in javascript?


    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?

    Shanmugapirya V.

  2. #2
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    0 Post(s)
    0 Thread(s)
    I wrote some code a while ago that will calculate how far down an element is from the top of the document:
    Code JavaScript:
    function getTotalOffsetTop(object){
    	var retval = 0;
    		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:
    Code JavaScript:
    // 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];
    // 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!
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts