Hallo Cybaer,
Ich habe auch gerade mal einen Lösungsansatz versucht, wie man es mit den Cursor-Auf- und -Ab-Tasten steuern könnte.
Sinnvoller wäre da (...) wenn der Balken auch beim Scrollen automatisch in der Mitte des Viewports bliebe.
Ich meine, nur mal so als Anregung für deine anscheinend überschüssige Energie ... ;->
Zu spät, habe Ersteres unter Unterdrückung der Standardaktionen bereits umgesetzt. Aber da du mich schon ertappt hast, überlege ich mir jetzt mal was zu deiner anderen Anregung, müsste ja mit getComputedStyle bzw. currentStyle der Zeilenhöhe in Verbindung mit scrollBy() gehen.
;-)
Ach ja, die übliche Überprüfung der Methoden und Eigenschaften, zu der du mich immer ermahnst, müsste ich auch noch einbauen
Nach dem Motto: Arbeit ist genug da, man muss sie nur sehen!:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>TableRowFocus mit Cursortaste</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
[code lang=css]
html, body, form {
height:100%;
width:100%;
margin:0;
padding:0;
}
#meineTabelle {
height:100%;
width:100%;
border-collapse:collapse;
}
</style>
<script type="text/javascript">
var virgin = true;
var lauf = -1;
var step;
var zeilen;
function init () {
zeilen=document.getElementById('meineTabelle').getElementsByTagName('TR');
if (window.captureEvents) {
window.captureEvents(Event.KEYPRESS);
window.onkeypress=laufen;
} else {
document.onkeydown=laufen;
}
}
function laufen (e) {
var e = e || window.event;
var taste = e.which || e.keyCode;
if((taste==38)||(taste==40)) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue=false;
}
if(taste==38) {
if(virgin) {
step=zeilen.length;
virgin=false;
} else {
step=-1;
lauf+=zeilen.length;
}
} else {
step=1;
}
lauf+=step;
lauf%=zeilen.length;
for (i=0; i<zeilen.length; i++ ) {
if(i!=lauf) {
zeilen[i].style.background='';
} else {
zeilen[i].style.background='#DDEEFF';
}
}
}
}
window.onload=init;
</script>
</head>
<body>
<table id="meineTabelle">
<tr>
<td>In</td>
<td>jeglicherer</td>
<td>Zelle</td>
<td>jeder</td>
<td>Zeile</td>
<td>der</td>
<td>Tabelle</td>
<td>steht</td>
<td>etwas</td>
<td>anderes.</td>
</tr>
<!-- Hier folgen jetzt endlos viele Zeilen der gleichen Art -->
</table>
</body>
</html>
[/code]
Gruß Gernot