Question

Hi I have the following code which control the position of an image gallery (which can be seen at steven.tlvweb.com). The scroll wheel currently controls the gallery position but the keydown events don’t, and I would like them to. The alerts in the code below (keyLeft and keyRight) are seen but this.parent.scroll is not being called at all.

The argument sc just needs to be a positive or negative integer – that is what event.wheelDelta is after all so I am left wondering, what is the correct way to call this prototype function please?

/* //////////// ==== ImageFlow Constructor ==== //////////// */


function ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval) {
    this.oc = document.getElementById(oCont); 
this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
this.text       = getElementsByClass(this.oc,   'div', 'text');
this.bar        = getElementsByClass(this.oc,   'img', 'bar');
this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
    this.bar.parent = this.oc.parent = this; 
    this.arL.parent = this.arR.parent = this;

    /* === handle mouse scroll wheel === */
    this.oc.onmousewheel = function () {
        this.parent.scroll(event.wheelDelta);
        return false;
    }

    var pleasework = this;

/* ==== add keydown events ==== */
    window.document.onkeydown=function(){  
        pleasework.keypress(event.keyCode);
        return false;
    }

}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {

scroll: function (sc) {
        if (sc < 0) {
            if (this.view < this.NF - 1) this.calc(1);
        } else {
            if (this.view > 0) this.calc(-1);
        }
    },


keypress : function (kp) {

    switch (kp) {
        case 39:
            //right Key
            if (this.view < this.NF - 1) this.calc(1);
            break;
        case 37:
            //left Key
            if (this.view > 0) this.calc(-1);
            break;
    }

    },

}

Thanks in advance
Steven (a novice Java programmer)

Answer 1

Do not use that parent property on the DOM elements. Instead, just create a closure over a local variable. So, replace

this.bar.parent = this.oc.parent = this; 
this.arL.parent = this.arR.parent = this;

/* === handle mouse scroll wheel === */
this.oc.onmousewheel = function () {
    this.parent.scroll(event.wheelDelta);
    return false;
}

/* ==== add keydown events ==== */
window.document.onkeydown=function(){  
    this.parent.keypress(event.keyCode);
    return false;
}

with

var parent = this;
this.oc.onmousewheel = function(e) {
    parent.scroll(e.wheelDelta);
    e.preventDefault();
};
window.document.onkeydown = function(e) { // notice this overwrites previous listeners
    parent.keypress(e.keyCode);
};