You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Caroline Jen <ji...@yahoo.com> on 2007/06/28 22:32:12 UTC
Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
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
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Caroline Jen <ji...@yahoo.com>.
Thanks for the link. I think I can struggle through
the problems.
-Caroline
--- Andrew Robinson <an...@gmail.com>
wrote:
> http://tinyurl.com/3374pw
>
> On 7/3/07, Caroline Jen <ji...@yahoo.com>
> wrote:
> > But, I am using IE 6. I tried to hold the focus
> on
> > the highlighted first row of the table. It does
> not
> > work.
> > --- Andrew Robinson <an...@gmail.com>
> > wrote:
> >
> > > As I mentioned, you have to put the focus on an
> > > input element, not a
> > > table element. Unless you are on IE, table
> elements
> > > cannot hold focus
> > > and cannot receive key events.
> > >
> > > On 7/3/07, Caroline Jen <ji...@yahoo.com>
> > > wrote:
> > > > 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
> > > > {
> > > >
> //
>
=== message truncated ===
____________________________________________________________________________________
Sick sense of humor? Visit Yahoo! TV's
Comedy with an Edge to see what's on, when.
http://tv.yahoo.com/collections/222
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Andrew Robinson <an...@gmail.com>.
http://tinyurl.com/3374pw
On 7/3/07, Caroline Jen <ji...@yahoo.com> wrote:
> But, I am using IE 6. I tried to hold the focus on
> the highlighted first row of the table. It does not
> work.
> --- Andrew Robinson <an...@gmail.com>
> wrote:
>
> > As I mentioned, you have to put the focus on an
> > input element, not a
> > table element. Unless you are on IE, table elements
> > cannot hold focus
> > and cannot receive key events.
> >
> > On 7/3/07, Caroline Jen <ji...@yahoo.com>
> > wrote:
> > > 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;
> > > }
> > > }
> >
> === message truncated ===
>
>
>
>
> ____________________________________________________________________________________
> Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail, news, photos & more.
> http://mobile.yahoo.com/go?refer=1GNXIC
>
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Caroline Jen <ji...@yahoo.com>.
But, I am using IE 6. I tried to hold the focus on
the highlighted first row of the table. It does not
work.
--- Andrew Robinson <an...@gmail.com>
wrote:
> As I mentioned, you have to put the focus on an
> input element, not a
> table element. Unless you are on IE, table elements
> cannot hold focus
> and cannot receive key events.
>
> On 7/3/07, Caroline Jen <ji...@yahoo.com>
> wrote:
> > 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;
> > }
> > }
>
=== message truncated ===
____________________________________________________________________________________
Take the Internet to Go: Yahoo!Go puts the Internet in your pocket: mail, news, photos & more.
http://mobile.yahoo.com/go?refer=1GNXIC
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Andrew Robinson <an...@gmail.com>.
As I mentioned, you have to put the focus on an input element, not a
table element. Unless you are on IE, table elements cannot hold focus
and cannot receive key events.
On 7/3/07, Caroline Jen <ji...@yahoo.com> wrote:
> 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 <an...@gmail.com>
> 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 <ji...@yahoo.com>
> > 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
>
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Caroline Jen <ji...@yahoo.com>.
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 <an...@gmail.com>
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 <ji...@yahoo.com>
> 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
Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Posted by Andrew Robinson <an...@gmail.com>.
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 <ji...@yahoo.com> 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
>