...

View Full Version : Scroll Rows One at a Time Using Keyboard Up Arrow Key or Down Arrow Key



jiapei_jen
07-03-2007, 04:46 PM
Hi, I have made something work - I am able to use the keyboard down arrow key to highlight the next row in the table or use the keyboard up arrow key to highlight the previous row in the table. And When the page is loaded, the first row of the table is automatically highlighted (see the code shown below.)

But, there are two problems:

1. Before I use the keyboard keys to scroll rows one at a time, I have to de-highlight the first row and re-highlight the first row of the table using the mouse. Does it mean that my table is not "on focus" when the page is loaded? How do I set the focus to the table?

2. I can use the down/up arrow keys to scroll rows one at a time. However, I have 10 rows on display within the <div> when the page is loaded (and the table has a couple hundreds of rows.) I want to keep those 10 rows on the screen when I am moving downwardly until I reached the 10th row. That is to sasy, when the highlighter is on the 10th row and I press the down arrow key, then the first row retires from view and the 11th row comes into view. I am still unable to figure it out how to do it.

If someone could kindly help.


.....
.....
<script language="JavaScript1.1" type="text/javascript">
var currentRow = 1;
var VISIBLE_ROWS = 10;

window.onload = function()
{
var table = document.getElementById( 'countriesList:countryTable' );
var trs = table.getElementsByTagName('tr');
highlightRow( trs[currentRow] );
}

var highlightedRow;

function addOnclickToDatatableRows() {
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = new Function("highlightRow(this)");
}
}

function highlightRow(tr) {
tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
highlightedRow = tr;
}

function dehighlightRow(tr) {
tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
table = null;
trs = null;
}

function processKeys( e )
{
var table = document.getElementById( 'countriesList:countryTable' );
var numRows = table.rows.length;
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Key up.
case 38:
if (parseInt(currentRow) == parseInt(1))
{
// reached the top of the table; do nothing.
return true;
} else
{
// move one row up.
scrollRow( "up" );
setCurrentRow( currentRow );
return false;
}
break;

// Key down.
case 40:
if (currentRow == (numRows - 1))
{
// reached the end of the table; do nothing
return true;
} else
{
scrollRow( "down" );
setCurrentRow( currentRow );
if (currentRow > VISIBLE_ROWS)
{
return true;
} else
{
return false;
}
}
break;
}

function scrollRow ( dir )
{
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
if (dir == "up")
{
dehighlightRow ( trs[ currentRow ] );
currentRow--;
highlightRow( trs[ currentRow ] );
} else if (dir == "down")
{
dehighlightRow( trs[ currentRow ] );
currentRow++;
highlightRow( trs[ currentRow ] );
}
}
}

</script>
.....
.....
<h:form id="countriesList">
.....
<div style="height:12em; width:20em;" class="scrollbar">
<h:dataTable value="#{countriesManagementBean.countriesList}" var="country"
id="countryTable" ......... onkeydown="processKeys( event )">

.....
.....
</h:dataTable>
</div>

</form>
.....

jiapei_jen
07-03-2007, 05:15 PM
I have tried to set the focus when the page is loaded:


window.onload = function()
{
var table = document.getElementById( 'countriesList:countryTable' );
var trs = table.getElementsByTagName('tr').focus();
highlightRow( trs[currentRow] );
}

Then my first row is no longer highlighted when the page is loaded. And other JavaScript functions stops working.

I tried to put:


location.hash="FirstRow";

instead. However, I do not know where to put my anchor; i.e. <a ...></a>

jiapei_jen
07-06-2007, 05:40 PM
I have solved my first problem - set focus on the table when the web page is loaded. The solution is:

in addition to specify the attribute:


onkeydown="processKeys( event )"

for the <table ....> tag, I have to put


document.onkeydown = function(event) { processKeys(event); };

in my JavaScript.

I am still struggling with my second problem. I am able to use the keyboard down arrow key and up arrow key to move down and up rows in the table one at a time with the current row highlighted.

But, I am still short of what I want to achieve - I set the height of my DIV to have 10 rows for viewing. And my table has about 200 rows. I want to keep the first 10 rows in the viewing area until I press the down arrow key the 11th time. At that juncture, the 11th to 20th row should be moved to the viewing area. So on and so forth. My code is shown below. I need ideas to modify my code. Thank you.


....
<script language="JavaScript1.1">

var firstRow = 1;
var currentRow;
var highlightedRow;

function addOnclickToDatatableRows() {
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = new Function( "highlightRow( this )" );
}
}

function highlightRow( tr ) {
if ( currentRow == null )
{
tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
highlightedRow = tr;
}
else
{
dehighlightRow( highlightedRow );
tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
highlightedRow = tr;
currentRow = tr.rowIndex;
}
}

function dehighlightRow( tr ) {
tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
}

function processKeys( e )
{
var table = document.getElementById( 'countriesList:countryTable' );
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
var numRows = table.rows.length;
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Key up.
case 38:
if (parseInt(currentRow) == parseInt(1))
{
// reached the top of the table; do nothing.
return true;
} else
{
// move one row up.
scrollRow( "up" );
setCurrentRow( currentRow );
return false;
}
break;

// Key down.
case 40:
if ( currentRow == (numRows - 1) )
{
// reached the end of the table; do nothing
return true;
} else
{
scrollRow( "down" );
setCurrentRow( currentRow );
if (currentRow > VISIBLE_ROWS)
{
return true;
} else
{
return false;
}
}
break;
}

function scrollRow ( dir )
{
if (dir == "up")
{
currentRow--;
highlightRow( trs[ currentRow ] );
} else if (dir == "down")
{
currentRow++;
highlightRow( trs[ currentRow ] );
}
var div = document.getElementById("container");
div.scrollTop = currentRow*15;
}
}
....
....
<body>
<form id="countriesList">
<div style="height:12em; width:20em;" id="container" class="scrollbar">
<table id="countryTable" onkeydown="processKeys( event )"
ondblclick="addOnclickToDatatableRows()">


</table>

.....
.....
<script>
addOnclickToDatatableRows();
var table = document.getElementById( 'countriesList:countryTable' );
var trs = table.getElementsByTagName( 'tr' );
highlightRow( trs[ firstRow ] );
trs[ firstRow ].focus();
currentRow = trs[ firstRow ].rowIndex;
document.onkeydown = function(event) { processKeys(event); };
</script>
</form>
</body>
</script>

vwphillips
07-07-2007, 12:58 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Current=0;

function Scroll(dir,nu){
var zxcobj=document.getElementById('Tst');
var table=zxcobj.getElementsByTagName('TABLE')[0];
var trs=table.getElementsByTagName('TR')
for (var zxc0=0;zxc0<trs.length;zxc0++){
if (trs[zxc0].offsetTop+trs[zxc0].offsetHeight>zxcobj.offsetHeight) break;
}
Current+=dir*nu;
Current=(Current<0)?0:(Current>zxc0)?zxc0:Current;
zxcobj.scrollTop=trs[Current].offsetTop;
}
/*]]>*/
</script></head>

<body>
<div id="Tst" style="position:relative;overflow:hidden;width:200px;height:100px;border:solid black 1px;" >
<table width="200" cellpadding="0" cellspacing="0" border="0">
<tr height="20"><td>0</td></tr>
<tr height="20"><td>1</td></tr>
<tr height="20"><td>2</td></tr>
<tr height="20"><td>3</td></tr>
<tr height="20"><td>4</td></tr>
<tr height="20"><td>5</td></tr>
<tr height="20"><td>6</td></tr>
<tr height="20"><td>7</td></tr>
<tr height="20"><td>8</td></tr>
<tr height="20"><td>9</td></tr>
</table>
</div>
<br />
<input type="button" name="" value="Move Up" onclick="Scroll(1,2)"/>
<input type="button" name="" value="Move Down" onclick="Scroll(-1,3)"/>

</body>

</html>

jiapei_jen
07-09-2007, 01:30 PM
Thank you for giving me a code example. Now, I have a basis to follow and continue my work for I had no experience in working with scrollbars.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum