How do I invoke this function with JavaScript?

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>

@CharmingPrince Could not be less accurate if you'd posted about zebras. jQuery, believe it or not, isn't involved here. :P — Chris Baker, Dec 12 '11 at 17:27
@Chris as you can clearly see from the comment, i said "I think"? of which am not sure about. Since it's wrong just leave it at that, am no JavaScript expert. — Charming Prince, Dec 14 '11 at 08:47
Then why comment at all? I don't fault you for not knowing - there are a lot of things I don't know. The issue I take is that you've told someone something patently false, coming from a position of ignorance on the subject at hand. Better to observe and learn than spread inaccurate information. — Chris Baker, Dec 14 '11 at 14:55
@Chris that's why it's called a comment, am not giving an answer, if i wrote that in the answer field then you can say anything you want.Good to know you don't know everything because there's no such people, if someone made a comment that's wrong, you don't have to rant about it, just like @ SLaks - just said "Wrong" - keep it simple I'll understand my mistake and learn from there instead of the way you're taking it. so just chill. — Charming Prince, Dec 15 '11 at 04:59
Actually, I only left my comment to further iterate on *why* it is wrong - simply stating "wrong" isn't going to give anyone any information. If anyone needs to chill, it is you. Sorry you're having a hard time here. Only one of us is "ranting"... — Chris Baker, Dec 15 '11 at 15:08
@Chris so you just move around other people's questions, just to see which comments/answers are wrong, then comment on them? Not actually giving an answer of your own to the question asked! So if am so wrong, i don't see any answers given by you here? so why say anything further? — Charming Prince, Dec 17 '11 at 10:46

Adam Rackis · Accepted Answer · 2011-12-12T17:40:51.723

5

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.

edited Dec 12 '11 at 17:40

answered Dec 12 '11 at 17:13

Adam Rackis

82,527
56
270
393

That is *declaring a variable* and *assigning to it* (*initializing it with*) *a reference to* an instance. One of the most important things for JS/ES beginners is learning the proper terminology, so that they can understand technical articles and do not fall victim of people who do not know what they are talking about (no offense meant). – PointedEars Dec 12 '11 at 17:18
is it automatically called on page load or should I have to call it manually? If so, how to call it? – Mad coder. Dec 12 '11 at 17:20
@KarsM - it is **not** automatically called. You have to call it yourself. – Adam Rackis Dec 12 '11 at 17:21
@PointedEars - no offense taken. I edited to be a bit more explicit. – Adam Rackis Dec 12 '11 at 17:22
@AdamRackis - How and where to call it? – Mad coder. Dec 12 '11 at 17:25
Did you mean some thing of this kind? `var chatscroll = new Object(); var pane = new chatscroll.Pane('div1'); div1.pane(); chatscroll.Pane = function (scrollContainerId)` I tried it but still its not working. – Mad coder. Dec 12 '11 at 17:32
There is no `body.onload`, there is `window.onload`. `window.onload` is proprietary, though, and should be avoided. Use `` and do at least the initialization in `userFunction()`. The `onload` _attribute_ (in the markup) of the `BODY` element relates to the [`load` event](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) that occurs when the document has been fully parsed and the document tree is ready for manipulation. – PointedEars Dec 12 '11 at 17:36
@PointedEars - great edit. I just kept this **context** instead of **value**, since that's how I've always heard it referred to, and how I always used it myself. I also trimmed one sentence early on. Thanks again, you really helped improve that answer. – Adam Rackis Dec 12 '11 at 17:36
@KarsM - pointed ears knows whereof he speaks. I was cavalier in referring to `body.onload`. But to use this Pane object, all you do is: `var chatScrollPane = new chatscroll.Pane('yourDivId');` and then to use it `chatScrollPane.activeScroll()` Sorry, there was a typo in my comment above when I deleted. Just make sure you don't call `chatScrollPane.activeScroll()` until your dom is formed. – Adam Rackis Dec 12 '11 at 17:39
@AdamRackis Thanks. But you SHOULD rethink the use of "context" there. It is misleading, as it is associated with "execution context". A common misconception about ES implementations, particularly among beginners, is that `this` has something to do with scope. Then they go and pass "scopes" around, for example. "`this` value" is what you can find in the ECMAScript Language Specification and good tutorials instead. – PointedEars Dec 12 '11 at 17:40
@PointedEars - ok, you're right. JS can be an extremely difficult language for beginners, so I guess being particular with verbiage is probably a good idea. – Adam Rackis Dec 12 '11 at 17:41
Still its not working. I added the edited code in my question as `update 1` kindly check whether did I do it correctly or not? If so, please edit the code in question itself in `update 1` region. – Mad coder. Dec 12 '11 at 17:48
@KarsM - without getting into a lengthy discussion of how hoisting works, move this to the end of your script: `var chatScrollPane = new chatscroll.Pane('div1');` and move this to a location that's called after your dom is formed, like window.onload: `chatScrollPane.activeScroll()` – Adam Rackis Dec 12 '11 at 17:57
1

@AdamRackis Perhaps one should use "method" (OOP) instead of "function". And "hoisting" is another misconception :) [JavaScript: The World's Most Misunderstood Programming Language](http://javascript.crockford.com/javascript.html) – PointedEars Dec 12 '11 at 18:03
@PointedEars - correct me if I'm wrong, but the **declaration** of `chatscroll.Pane` will be hoisted to the top of the context, but the initialization of `= function (scrollContainerId) {` will not. So at the time she tried to invoke the constructor, Pane was declared, but still `undefined` – Adam Rackis Dec 12 '11 at 18:04
@AdamRackis Hmmm, where did that "Let's go to chat" button go? First, `chatScroll.Pane` is never *declared*. Second, variable instantiation (ES3) or declaration binding instantiation (ES5) takes place immediately after control enters the execution context (that involves all variable and all function declarations). That declarations would be "hoisted", i. e. moved somehow, is the misconception [apparently originating from the book "JavaScript Patterns" by Stoyan Stefanov, Chapter 4 - Functions, section "Declarations Versus Expressions: Names and Hoisting" (p. 59).] – PointedEars Dec 12 '11 at 18:14
@PointedEars Ok, chatScroll is never declared - hoisting doesn't apply to *this* situation, my bad. But hoisting does definitely occur. With var f = function() {} the declaration of `f` is hoisted to the top of the context, but it doesn't get initialized until that line hits. function statements are hoisted in toto. See Crockford's book on page 113, and this fiddle http://jsfiddle.net/4bN4Y/1/ The spec may not refer to the moving of f to the top of the context as hoisting, but I've definitely seen it referred to as such on more than one occasion. – Adam Rackis Dec 12 '11 at 18:28
See also google's top result for "Javascript Hoisting" http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting `Function declarations and variable declarations are always moved ("hoisted") invisibly to the top of their containing scope by the JavaScript interpreter.` – Adam Rackis Dec 12 '11 at 18:44
@AdamRackis This is going nowhere. As a matter of fact, 90% (or more) about these languages on the Web is plain junk (especially blogs). Even more so for books. (Clueless) people invent all sorts of fancy names ("AJAX", "javascript", "hoisting", you name it) for concepts that already have much better names. And even Crockford is terribly wrong (or oversimplificating) at times. Too bad there is no "Let's continue in chat" button anymore. We can go on in private messages or comp.lang.javascript if you like, but I think it's EOD for me here as I already have been there. – PointedEars Dec 12 '11 at 19:19
@PointedEars - it's more important to be understood than to be right. If 90% of the world uses terminology that doesn't mesh 100% with the spec, then just go with it, talk to people, and move on. "Hoisting" is a very clear, colloquial term that explains what's going on. I've never heard someone claim that it doesn't exist until now. Do you really want to put yourself in opposition to Douglas Crockford? That's not a very intelligent place to be. – Adam Rackis Dec 12 '11 at 19:25
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/5784/discussion-between-pointedears-and-adam-rackis) – PointedEars Dec 12 '11 at 19:28
@AdamRackis - That's what I did it right? check my update in question. But still I cannot work with this code. – Mad coder. Dec 13 '11 at 13:26
@KarsM You need to learn and apply some [code style](http://stackoverflow.com/questions/211795/are-there-any-coding-standards-for-javascript) (*any* style is better than this), then logical errors such as here are easier for you to see. There are code formatters (for example in [Eclipse JSDT](http://www.eclipse.org/webtools/jsdt/)), but you should be able to write readable code by yourself as well. Try that first. – PointedEars Dec 14 '11 at 00:55
@KarsM - `chatscroll.Pane = function (scrollContainerId) {` must come **before** `var chatScrollPane = new chatscroll.Pane('div1');` – Adam Rackis Dec 14 '11 at 01:16

How do I invoke this function with JavaScript?

1 Answers1