Question

I am just working with basic level of javascripts. Today I found the below and for scrolling down DIV layer when new data adds to DIV. I couldn’t understand how to Call the function. Is it to be used using window.onload function? or any other. And where should I declare the DIV name?

Code follows.

var chatscroll = new Object();
chatscroll.Pane = 
    function(scrollContainerId)
    {
        this.bottomThreshold = 25;
        this.scrollContainerId = scrollContainerId;
    }

chatscroll.Pane.prototype.activeScroll = 
    function()
    {
        var scrollDiv = document.getElementById(this.scrollContainerId);
        var currentHeight = 0;

        if (scrollDiv.scrollHeight > 0)
            currentHeight = scrollDiv.scrollHeight;
        else 
            if (objDiv.offsetHeight > 0)
                currentHeight = scrollDiv.offsetHeight;

        if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
            scrollDiv.scrollTop = currentHeight;

        scrollDiv = null;
    }

Update 1:

<script type="text/javascript">
    var chatscroll = new Object();
    var chatScrollPane = new chatscroll.Pane('div1');
    chatScrollPane.activeScroll()
    chatscroll.Pane = function (scrollContainerId) {
    this.bottomThreshold = 25;
    this.scrollContainerId = scrollContainerId;
}
    chatscroll.Pane.prototype.activeScroll = function () {
    var scrollDiv = document.getElementById(this.scrollContainerId);
    var currentHeight = 0;

    if (scrollDiv.scrollHeight > 0)
        currentHeight = scrollDiv.scrollHeight;
    else
        if (objDiv.offsetHeight > 0)
            currentHeight = scrollDiv.offsetHeight;

    if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
        scrollDiv.scrollTop = currentHeight;
    scrollDiv = null;
}
</script>

Answer 1

chatscroll.Pane is designed to be used as a constructor. You would construct an instance like this:

new chatscroll.Pane('somescrollContainerId');

The returned value becomes reusable if you assign it to a variable.

var chatScrollPane = new chatscroll.Pane('somescrollContainerId');

The scrollContainerId you pass in will be the ID (id attribute) of the DIV element in your HTML document that you want to use this object with.

You shouldn’t need to declare it in your window.onload, but that certainly won’t hurt. All the constructor is doing is creating a new object, setting the this value to that new object, creating and setting bottomThreshold and scrollContainerId properties therein, then returning this new object when the constructor is finished.

Just make sure you never call the activeScroll function until after the document is fully parsed, since that actually goes into your document to retrieve and manipulate elements.