JQuery - appending and deleting html content while scrolling

Question

Question: how can i calculate scroll position after deleting (with jquery) some lines at the beginning of a html file - scroll position which will provide view at the same lines as before deleting.

situation overview: I have generated HTML page, but i have problems because that generated page may have up to 200MB. So i want to: + hold all the data in the JS's Array + append content at the end and delete at the beginning dynamically while scrolling down + append content at the beginning and delete at the end while scrolling up

Operations with page beginning are making some unpredictable scrolls to different page parts. Here's my code, but i don't feel it's well - there're a lot of unused variables. Note that I'm appending lines from array DataLines + in visibleDataLinesNumbers i have indexes of lines which should be shown (there're also some hide/show selected lines functionality). Every line has also its id connected with index in DataLines (id = "l"+indexFromDataLine)

var howManyLinesToAppend = 100;
var howManyLinesToDelete = 300;
var whenAppendInPercent = 8/10;
var contentHeightMax = 15000;
var logLineDivHeight;
var lastScrollTop = 0;
window.onscroll = scrollHandling;

function scrollHandling() {
    var contentHeight = document.getElementById("log").offsetHeight;
    var yOffset = window.pageYOffset;       
    var yPosition = yOffset + window.innerHeight;


    var st = $(this).scrollTop();   
    if (st > lastScrollTop) {
        downscrollHandling(contentHeight, yOffset, yPosition);
    }
    else {
        upscrollHandling(contentHeight, yOffset, yPosition);
    }
    lastScrollTop = st; 
}



function downscrollHandling(contentHeight, yOffset, yPosition) {
    appendDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition);
    deleteDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition);
}

function upscrollHandling(contentHeight, yOffset, yPosition) {
    appendDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition);
    deleteDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition);
}

function appendDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition) {
    if(lowerBoundOfLinesOnScreen != 0 && yPosition < (1-whenAppendInPercent)*contentHeight) {
    var tmp ="";
    var startingLowerBoundOfLinesOnScreen = lowerBoundOfLinesOnScreen; 
    for(var i = startingLowerBoundOfLinesOnScreen - howManyLinesToAppend; i < startingLowerBoundOfLinesOnScreen; i++)
        tmp += DataLines[visibleLinesNumbers[i]];   

    lowerBoundOfLinesOnScreen -= howManyLinesToAppend;
    $("#l"+startingLowerBoundOfLinesOnScreen).before(tmp);
    }   
}

function deleteDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
    if(contentHeight > contentHeightMax) {
        for(var i = upperBoundOfLinesOnScreen  - howManyLinesToDelete; i < upperBoundOfLinesOnScreen; i++)
            $("#l"+visibleLinesNumbers[i]).remove();

        upperBoundOfLinesOnScreen -= howManyLinesToDelete;
    }
}

function appendDataLinesAtTheEndWhileScrolling(contentHeight, yOffset, yPosition) {
    if( yPosition >= contentHeight * whenAppendInPercent ) {
        showDataLines(howManyLinesToAppend);        
    }
}

function deleteDataLinesAtTheBeginningWhileScrolling(contentHeight, yOffset, yPosition)  {
    if(contentHeight > contentHeightMax) {
        for(var i = lowerBoundOfLinesOnScreen; i < lowerBoundOfLinesOnScreen + howManyLinesToDelete; i++) {
            $("#l"+visibleLinesNumbers[i]).remove();
        }
            lowerBoundOfLinesOnScreen += howManyLinesToDelete;
    }
}

Just to be sure... you're using AJAX to fetch the data right ? Cause else you may not have it displayed, but you would still have the data loaded, which would be quite heavy too... — Laurent S., Oct 07 '13 at 14:09
What exactly is your issue? I can't understand what it is you are asking of us. — Nunners, Oct 07 '13 at 14:10
Maybe this post will help you http://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll — Martin, Oct 07 '13 at 14:13
@Bartdude Data is all the time in the array and it's really lighter, i.e my firefox is working normally. (when i load it all to DOM at once, i have to hard restart computer). It's good idea to do that, but i have constraint to have it all in one file. — Piotr Ciesiołkiewicz, Oct 07 '13 at 14:25
@Nunners Good question, because i haven't asked any question. But maybe someone could provide some solution how to count where my page will scroll, when i delete some divs at the beginning. — Piotr Ciesiołkiewicz, Oct 07 '13 at 14:26
If you data is light but once loaded into the DOM the page is 200MB, then you should really review your HTML templating... And if loading it crashes your computer, you may also have a problem in your javascript loading code... — Laurent S., Oct 07 '13 at 14:29
@PiotrCiesiołkiewicz StackOverflow is a Question and Answer format. If you do not ask a question you cannot get an answer. Please ask a **specific** question so that we may be able to answer it. Otherwise your question might be closed due to it being too vague. — Nunners, Oct 07 '13 at 14:30

score 1 · Accepted Answer · answered Oct 07 '13 at 15:01

1

Take a look on that script: https://github.com/CardinalPath/gas/blob/master/src/plugins/max_scroll.js Regards

answered Oct 07 '13 at 15:01

Vitor Venturin

1,329
1
9
13

JQuery - appending and deleting html content while scrolling

1 Answers1