myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Andrew Robinson" <andrew.rw.robin...@gmail.com>
Subject Re: Use Up/Down Arrow Key to Move Up/Down of h:dataTable with Scrollbars
Date Tue, 03 Jul 2007 19:14:33 GMT
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 <jiapei_jen@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 <andrew.rw.robinson@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 <jiapei_jen@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
>

Mime
View raw message