how to use Javascript onKeyDown to control gallery - right and left arrows

Question

Please look at steven.tlvweb.com

I want to implement it so the left and right keyboard arrows control the flow.

Currently the scroll wheel works and is set up in the constructor as follows:

/*  ImageFlow Constructor */    

    /* add mouse wheel events ==== */
    if (window.addEventListener)
        this.oc.addEventListener('DOMMouseScroll', function(e) {
            if (e.preventDefault) e.preventDefault();
            this.parent.scroll(-e.detail);
            return false;
        }, false);

    this.oc.onmousewheel = function () {
        this.parent.scroll(event.wheelDelta);
        return false;
    }

And in the imageflow.prototype further down the code is:

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

So, I wrote some code for the constructor:

this.oc.onkeydown=function(){
        this.parent.keypress(event.keyCode);
        return false;
    }

and in the imageflow.prototype I included:

    /* ==== arrow keys ==== */
    keypress : function(kp) {   
        switch (kp) {

        case 39:                        //right Key
        if (this.view < this.NF - 1) {  //if not at far right of gallery
                    this.calc(1);       //move gallery left
        break;
                    }

                    case 37:            //left Key
        if (this.view > 0) {            //if not at far left of gallery
                    this.calc(-1);      //move gallery left
        break; 
                    } 

        }
    },  

NB Actually there is currently code in the imageflow constructor but it doesn't work (removing it all together even has no effect):

    /* ==== right arrow ==== */
    this.arR.onclick = this.arR.ondblclick = function () {
        if (this.parent.view < this.parent.NF - 1)
            this.parent.calc(1);
    }
    /* ==== Left arrow ==== */
    this.arL.onclick = this.arL.ondblclick = function () {
        if (this.parent.view > 0)
            this.parent.calc(-1);
    }

I reckon I am missing something relatively fundamental.

Answer 1

I've created a more simple example for you in JSFiddle.

http://jsfiddle.net/nLaGz/

Basically, it looks like you are trying to attach your keyboard events to the this.oc object, which basically represents your <div id="imageFlow"> element.

The problem is, that <div> elements are not input elements, so they don't play nicely with keyboard events since they never really gain "focus" like a form input would.

Luckily, the window.document object is a good place to attach your keyboard events since it will listen no matter what dom element has focus.

try changing your line:

this.oc.onkeydown

to

window.document.onkeydown

Answer 2

OK so thanks to Jason I am getting somewhere! Have a look at steven.tlvweb.com to see that the left and right arrow keys are now functioning.

I am just now having a problem with the line

this.parent.scroll(120);

Basically scroll is setup in the prototype to take an integer and move left or right depending on if it positive or negative. I am just not calling it correctly it seems.

this.parent.scroll(event.wheelDelta);

is correct coding for the constructor but within window.document.onkeydown=function() it does not work.

function ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval) {

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


/* ==== add keydown events ==== */  
    window.document.onkeydown=function(){
    switch (event.keyCode) {

    case 39:  //right Key
        alert('keyRight'); //move gallery right
        this.parent.scroll(120);

        break;

    case 37: //left Key

        alert('keyleft'); //move gallery left   
        this.parent.scroll(-120);
        break;

    }

    return false;
    }
}

ImageFlow.prototype = {

    scroll : function (sc) {

        alert('here');

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

}