Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scroll Rows One at a Time Using Keyboard Up Arrow Key or Down Arrow Key

    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.
    Code:
    .....
    .....
    	    <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>
    .....

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried to set the focus when the page is loaded:
    Code:
    			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:
    Code:
    location.hash="FirstRow";
    instead. However, I do not know where to put my anchor; i.e. <a ...></a>

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    onkeydown="processKeys( event )"
    for the <table ....> tag, I have to put
    Code:
    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.
    Code:
    ....
            <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>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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>
    Last edited by vwphillips; 07-07-2007 at 01:01 AM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •