Keyboard navigation in a table that is scroll able?

Introducción
Trying to make a table from a xml file: Works The table can only show a limited number of items at the time, so I made it scrollable: Works
I want to be able to navigate within the table with the keyboard: Works

Problema
The problem is that went you navigate to the bottom of the visual table, the table doesn't scroll, and you navigate into the non-visual part. How do I fix this?

<html>
<head>
    <script language="javascript" type="text/javascript" src="js/keycode.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script>
var b4 = "";
var col = 1;
var row = 1;

function bg() {
    var rc = "r" + row + "c" + col;
    if (b4 == "") b4 = rc;
    $("#"+b4).css("backgroundColor","");
    $("#div2").text($("#"+rc).css("backgroundColor","yellow").data("param2"));
    b4 = rc;
}

function processKeyDown(e) {
    var keyCode;

    if(e.which) { 
        keyCode = e.which;
    } else {
        alert("Unknown event type.");
        return ;
    }

    processKeyHandle(keyCode);

}

function processKeyHandle(keyCode) {
    var nc = 0;
    switch(keyCode) {
        case VK_LEFT :
            if (col > 1) col--;
            bg();
            break;
        case VK_UP :
            if (row > 1) row--;
            bg();
            break;
        case VK_RIGHT :
            if (col < 3) col++;
            bg();
            break;
        case VK_DOWN :
            if (row < 10) row++;
            bg();
            break;      
        default :
            break;      
    }
}
</script>


</head>


<body onload="bg()" onkeydown="processKeyDown(event);" >
    <div style="width:325px; height:100px; overflow:auto;">

    <script>
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","xml2.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML; 
        var item=xmlDoc.getElementsByTagName("item");

        var r = 1;
        var RowCol;

        document.write("<table id='tab' border='1' width='300px'>");
        for (index=0;index<item.length;index++) {
            document.write("<tr>");
                for (index,c=1; index<item.length && c<4; index++,c++) {
                    RowCol = "r" + r + "c" + c;
                    document.write("<td id='" + RowCol + "' data-param1='" + r + "' data-param2='" + RowCol + "'>");
                        var link = item[index].getElementsByTagName("link")[0].childNodes[0].nodeValue;
                        document.write(link);
                    document.write("</td>");
                }
            document.write("</tr>");
            r = r + 1;
        }
        document.write("</table>");

        </script>
</div>




</body>
</html>

preguntado el 31 de julio de 12 a las 15:07

1 Respuestas

You will need to check the computed style of the focused element and scroll the page so it get into the visible area.

For info in computed styles check en modo capricho, as how to scroll DND is always a nice place to go.

Respondido 31 Jul 12, 16:07

I put the code here too: jsfiddle.net/mpSWj/2 Could not get the split up of html/script to work. - Dennis Sødal Christensen

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.