trying to get instances working 1

[fb6668]

Hi there,

I have a basic script which expands and contracts a div. This works well when there's only one on the page, but when there's several, it gets confused if you try to click the expand button on one before another has completed exppanding, etc, so I thought that I should be using instances. I've tried this, as shown below, but it's obviously not quite there.
In my onclick, i call doExpandFields(0,10), where 0 is the index of the div I'm trying to expand, and 10 is the number of text rows this div contains, which allows me to calculate the height I need to expand to.
I'm using setInterval to make an animation effect, which is where I think the problem is, because with that,I end up with a problem whereby this.divHeight is undefined (as commented). If I remove the setInterval and just use a direct call to this.increaseHeight, it does find this.divHeight and increes it by ten pixels, as expected.
So could someone please help me to get this working with setInterval?

Thanks for your help!

The code...

function doExpandFields(index, rowcount)
{
    var exp = new Expander();
    exp.expandFields(index,rowcount);
}

function Expander()
{
    this.expandInterval = null;
    this.expandHeight = 0;
    this.hiddenDiv = null;
    this.expandImage = null;
    this.maxHeight = 0;
    this.whichDir = "out";
    this.index = -1;
    
    this.expandFields = function(index, rowCount)
    {
        this.index = index;
        //get the div to expand
        this.hiddenDiv = document.getElementById("hidden" + this.index);
        //get the image because we need to flip it
        this.expandImage = document.getElementById("expandImage" + this.index);
        //calculate the height to expand to
        this.maxHeight = rowCount * 15;
        
        if(this.hiddenDiv != null) {
            if(this.whichDir == "out") // expand the div
            {
                this.expandInterval = setInterval(this.increaseHeight, 10);
                this.expandImage.src = "/ig_res/Default/images/igpnl_dwn.gif";
                this.whichDir = "in";
            }
            else  //contract the div
            {
                this.expandInterval = setInterval(this.decreaseHeight, 10);
                this.expandImage.src = "/ig_res/Default/images/igpnl_up.gif";
                this.whichDir = "out";
            }
        }
        
    };

    this.decreaseHeight = function()
    {
        this.divHeight(-10);
    };

    // we get as far as here, but this.divHeight is now undefined....
    this.increaseHeight = function()
    {
        this.divHeight(10);
    };

    this.divHeight = function(interval)
    {
        this.expandHeight += interval;
        
        this.hiddenDiv.style.height = this.expandHeight + "px";
        
        if(this.expandHeight >= this.maxHeight || this.expandHeight <= 0){
            clearInterval(this.expandInterval);
        }
        
    };
};

 

[RbgoWeb]

the dot in:
this.increaseHeight
is like the slash in a path, in which the final destination is being expressed.
The only knowledge setInterval() and setTimeout() will receive when this.increaseHeight() is being passed is the function body of increaseHeight(), and further have no knowledge about the this pointer or the object it belongs to.
You can let setInterval() or setTimeout() callback if you pass them the globally known variable name of the instance instead of the this pointer.

 

[fb6668]

Thanks, I added a var self = this; at the start of Expander, then referred everything to self instead of this. Everything seems hunky dory now.
Cheers