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:
Problem 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? 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 stop
working.
I tried to put:
location.hash="FirstRow";
instead. However, I do not know where to put my
anchor; i.e. <a ...></a>
Problem 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>
.....
--- Andrew Robinson <[EMAIL PROTECTED]>
wrote:
> This isn't a full answer,
>
> First, I don't know of any re-usable code. I coded
> something very
> similar for my company, of an Excel like grid that
> used arrow keys and
> selection techniques using the keyboard. My bigger
> challenge was cross
> browser compatibility. IE allows you to give focus
> to any HTML
> element, but Firefox, only form elements. So, to fix
> this, I created a
> hidden input element (I think I used a <input
> type="text"
> style="visibility: hidden; ..." />). In that hidden
> element, I capture
> key events and move the input box using CSS absolute
> positioning and
> re-focus on the element.
>
> In your example, you could move the control around,
> putting it in each
> table row and using the javascript scroll commands
> (I remember those
> being different on IE and firefox too).
>
> On 6/28/07, Caroline Jen <[EMAIL PROTECTED]>
> wrote:
> > My web pages are coded in JSF. My question is
> > JavaScript related. I know maybe it is a wrong
> forum
> > to post this question but I simply want to take a
> > chance.
> >
> > I put a h:datatable inside the <div ....> tag. And
> I
> > have created a scrollbar for the <div ...> tag.
> >
> > The height of the <div ...> is set to display a
> > certain number of rows of the data table for
> viewing.
> > Let's say that I can see 10 rows within the <div
> > ....>.
> >
> > The challenge is that I must also use the up/down
> > arrow keys on the keyboard to view all the rows in
> > that table. The requirements are:
> >
> > 1. The first row of the table must be highlighted
> when
> > the web page is brought up to the screen.
> >
> > 2. Pressing the down arrow key once moves the
> > highlighter to the second row of the table; so on
> so
> > forth.
> >
> > 3. When the highlighter is on the 10th row of the
> > table, pressing the down arrow key will bring the
> 11th
> > to 20th rows of the table for viewing and the
> > highlighter will be on the 11th row of the table.
> >
> > 4. It keeps going util the last set of rows (maybe
> > less than 10) are brought up to the screen.
> >
> > 5. The up arrow key works in a similar way.
> >
> > I have surfed on the internet and found
> >
> >
>
http://www.tipstrs.com/tip/799/Scrol...g-the-keyboard
> >
>
http://www.codeproject.com/jscript/W...lScrollbar.asp
> >
> > I think that the JavaScript function
> > "scrollIntoView()" is very promising.
> >
> > Does a re-usable code exist?
> >
> >
> >
> >
>
____________________________________________________________________________________
> > Boardwalk for $500? In 2007? Ha! Play Monopoly
> Here and Now (it's updated for today's economy) at
> Yahoo! Games.
> >
>
http://get.games.yahoo.com/proddesc?gamekey=monopolyherenow
> >
>
____________________________________________________________________________________
Sick sense of humor? Visit Yahoo! TV's
Comedy with an Edge to see what's on, when.
http://tv.yahoo.com/collections/222
