Link to home
Start Free TrialLog in
Avatar of vidhubala
vidhubala

asked on

keyboard navigation

i have a div container with some div cells inside.
i would like to navigate thru all internal the divs using arrow keys. the function i have works for table cells.
how do i convert to divs? pl help.
<html>
<head>
<style>	
	.high {
		background-color:green;
		color:white;
	}
</style>
<script type="text/javascript">
window.onload=function(){select(document.getElementById('a1'));};
document.onkeyup = function(e) {
	  if(!e) e = window.event;
	  switch(e.keyCode ? e.keyCode : e.charCode) {
	  case 39: //right arrow
			moveRight();
			break;
	  case 37: //left arrow
			moveLeft();
			break;
	  case 38: //up arrow
			moveUp();
			break;
	  case 40: //down arrow
			moveDown();
			break;
	  }
}
 
var prev = null;
function select(el) {
        if(prev) prev.className = "";
        el.className = "high";
        prev = el;
} 
function moveRight() {
        if(!prev) return;
        
        var next = getRightCell(prev);
        
        if(!next) {
                 return;
        }
        
        select(next);
} 
function moveLeft() {
        if(!prev) return;
        
        var next = getLeftCell(prev);
        
        if(!next) {
                return;
        }
        
        select(next);
} 
function moveUp() {
        if(!prev) return;
        
        var col = getColNum(prev);
        var nrow = getUpRow(prev);
        
        if(!nrow) {
                return;
        }
 
        var cellDiff = getCellDiff(col, nrow);
        select(nrow.cells[cellDiff]);
}
function moveDown() {
        if(!prev) return;
        
        var col = getColNum(prev);
        var nrow = getDownRow(prev);
        
        if(!nrow) {
                return;
        }
        
        var cellDiff = getCellDiff(col, nrow);
        select(nrow.cells[cellDiff]);
}
</script>
</head>
 <body>
  <div style="border:1px solid yellow;width:685px;height:160px">
		<!-- first row -->
		<div id="a1" style="border:1px solid green;height:40px;width:170px;float:left">11</div>
		<div id="a2" style="border:1px solid green;height:40px;width:340px;float:left">12</div>
		<div id="a3" style="border:1px solid green;height:40px;width:170px;float:left">13</div>
		<!-- second row -->
		<div id="b1" style="border:1px solid green;height:40px;width:150px;float:left">21</div>
		<div id="b2" style="border:1px solid green;height:40px;width:340px;float:left">22</div>
		<div id="b3" style="border:1px solid green;height:40px;width:190px;float:left">23</div>
		<!-- 3rd row -->
		<div id="c1" style="border:1px solid green;height:40px;width:200px;float:left">31</div>
		<div id="c2" style="border:1px solid green;height:40px;width:100px;float:left">32</div>
		<div id="c3" style="border:1px solid green;height:40px;width:380px;float:left">33</div>
		<!-- 4th row -->
		<div id="d1" style="border:1px solid green;height:40px;width:110px;float:left">41</div>
		<div id="d2" style="border:1px solid green;height:40px;width:90px;float:left">42</div>
		<div id="d3" style="border:1px solid green;height:40px;width:480px;float:left">43</div>
  </div>
 </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of intrwrks
intrwrks
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of KNVB HK
KNVB HK
Flag of Hong Kong image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of vidhubala
vidhubala

ASKER

hi intr.. works great. thanks.

hi cs, urs seems to jump to first row after the 3rd row. can u pl check the problem?
Avatar of KNVB HK
KNVB HK
Flag of Hong Kong image
Oh!
The table contain 4 row instead of 3 row.
thank you,

<html>
<head>
<style> 
        .high {
                background-color:green;
                color:white;
        }
</style>
<script type="text/javascript">
window.onload=function(){select(document.getElementById('a_1'));};
document.onkeyup = function(e) {
          if(!e) e = window.event;
          switch(e.keyCode ? e.keyCode : e.charCode) {
          case 39: //right arrow
                        moveRight();
                        break;
          case 37: //left arrow
                        moveLeft();
                        break;
          case 38: //up arrow
                        moveUp();
                        break;
          case 40: //down arrow
                        moveDown();
                        break;
          }
}
 
var prev = null;
function getPrevCol()
{
	var id=getPrevId();
	nextCol=getCurrentCol()-1;
	if (nextCol==0)
		nextCol=3;
	return nextCol;
}
function getNextCol()
{
	var id=getPrevId();
	nextCol=getCurrentCol()+1;
	if (nextCol==4)
		nextCol=3;
	return nextCol;
}
function getPrevRow()
{
	switch (getCurrentRow())
	{
		case "a":return "c";
				 break;
		case "b":return "a";
				 break;		 	
		case "c":return "b";
				 break;
		case "d":return "c";
				 break;		 
	}
}
function getNextRow()
{
	switch (getCurrentRow())
	{
		case "a":return "b";
				 break;
		case "b":return "c";
				 break;		 	
		case "c":return "d";
				 break;		 
		case "d":return "a";
				 break;		 
	}
}
function getCurrentRow()
{
	var id=getPrevId();
	row=id.substring(0,id.indexOf("_"));
	return row;
}
function getCurrentCol()
{
	var id=getPrevId();
	row=parseInt(id.substring(id.indexOf("_")+1));
	return row;
}
function getPrevId()
{
	return prev.id;
}
 
function select(el) {
        if(prev) prev.className = "";
        el.className = "high";
        prev = el;
} 
function moveRight() 
{
	select(document.getElementById(getCurrentRow()+"_"+getNextCol()));
} 
function moveLeft()
{
   select(document.getElementById(getCurrentRow()+"_"+getPrevCol()));     
} 
function moveUp() {
      select(document.getElementById(getPrevRow()+"_"+getCurrentCol()));       
}
function moveDown() {
    select(document.getElementById(getNextRow()+"_"+getCurrentCol()));           
}
</script>
</head>
 <body>
  <div style="border:1px solid yellow;width:685px;height:160px">
                <!-- first row -->
                <div id="a_1" style="border:1px solid green;height:40px;width:170px;float:left">11</div>
                <div id="a_2" style="border:1px solid green;height:40px;width:340px;float:left">12</div>
                <div id="a_3" style="border:1px solid green;height:40px;width:170px;float:left">13</div>
                <!-- second row -->
                <div id="b_1" style="border:1px solid green;height:40px;width:150px;float:left">21</div>
                <div id="b_2" style="border:1px solid green;height:40px;width:340px;float:left">22</div>
                <div id="b_3" style="border:1px solid green;height:40px;width:190px;float:left">23</div>
                <!-- 3rd row -->
                <div id="c_1" style="border:1px solid green;height:40px;width:200px;float:left">31</div>
                <div id="c_2" style="border:1px solid green;height:40px;width:100px;float:left">32</div>
                <div id="c_3" style="border:1px solid green;height:40px;width:380px;float:left">33</div>
                <!-- 4th row -->
                <div id="d_1" style="border:1px solid green;height:40px;width:110px;float:left">41</div>
                <div id="d_2" style="border:1px solid green;height:40px;width:90px;float:left">42</div>
                <div id="d_3" style="border:1px solid green;height:40px;width:480px;float:left">43</div>
  </div>
 </body>
</html>

Open in new window

Avatar of vidhubala
vidhubala

ASKER

hi guys

did u test ur code in firefox3? it doesnt work. thanks
Avatar of intrwrks
intrwrks
Flag of United States of America image
I have corrected the code to only search for the next div tag instead of the next tag. FireFox adds in a #text container for newlines.

I have also changed the style of the row div's and the containing div to allow similar look in both IE and FireFox. FireFox requires you to include the border size in the width of the element whereas IE does not. This can cause problems when you are hardcoding widths and using borders. I have removed the width from the containing div and made it float, so that it's size will adjust to the inner widths.
<html>
<head>
<style>	
	.high {
		background-color:green;
		color:white;
	}
</style>
<script type="text/javascript">
window.onload=function(){select(document.getElementById('a1'));};
document.onkeyup = function(e) {
	  if(!e) e = window.event;
	  switch(e.keyCode ? e.keyCode : e.charCode) {
	  case 39: //right arrow
			moveRight();
			break;
	  case 37: //left arrow
			moveLeft();
			break;
	  case 38: //up arrow
			moveUp();
			break;
	  case 40: //down arrow
			moveDown();
			break;
	  }
}
 
var prev = null;
function select(el) {
	if(prev) prev.className = "";
        el.className = "high";
        prev = el;
} 
function moveRight() {
        if(!prev) return;
        
	var next = (prev.nextSibling ? prev.nextSibling : prev.parentNode.firstChild);
	while (next.nodeName.toLowerCase() != "div"){
		next = (next.nextSibling ? next.nextSibling : next.parentNode.firstChild);
	}
        
        if(!next) {
                 return;
        }
        
        select(next);
} 
function moveLeft() {
        if(!prev) return;
        
        var next = (prev.previousSibling ? prev.previousSibling : prev.parentNode.lastChild);
	while (next.nodeName.toLowerCase() != "div"){
		next = (next.previousSibling ? next.previousSibling : next.parentNode.lastChild);
	}
        
        if(!next) {
                return;
        }
        
        select(next);
} 
function moveUp() {
        if(!prev) return;
 
	var col = indexOfObject();
	var row = (prev.parentNode.previousSibling ? prev.parentNode.previousSibling : prev.parentNode.parentNode.lastChild);
	while (row.nodeName.toLowerCase() != "div"){
		row = (row.previousSibling ? row.previousSibling : row.parentNode.previousSibling);
	}
        
	var next = row.childNodes[col];
        if(!next) {
                return;
        }
 
        select(next);
}
function moveDown() {
        if(!prev) return;
        
        var col = indexOfObject();
	var row = (prev.parentNode.nextSibling ? prev.parentNode.nextSibling : prev.parentNode.parentNode.firstChild)
	while (row.nodeName.toLowerCase() != "div"){
		row = (row.nextSibling ? row.nextSibling : row.parentNode.firstChild);
	}
 
	var next = row.childNodes[col];
        
        if(!next) {
                return;
        }
        
        select(next);
}
function indexOfObject(){
	for (var a = 0; a < prev.parentNode.childNodes.length; a++){
		if (prev.parentNode.childNodes[a] == prev) return a;
	}
}
</script>
</head>
 <body>
  <div style="border:1px solid yellow;float:left">
	
	<div id="row1" style="clear:both;">
		<div id="a1" style="border:1px solid green;height:40px;width:170px;float:left">11</div>
		<div id="a2" style="border:1px solid green;height:40px;width:340px;float:left">12</div>
		<div id="a3" style="border:1px solid green;height:40px;width:170px;float:left">13</div>
	</div>
	
	<div id="row2" style="clear:both;">
		<div id="b1" style="border:1px solid green;height:40px;width:150px;float:left">21</div>
		<div id="b2" style="border:1px solid green;height:40px;width:340px;float:left">22</div>
		<div id="b3" style="border:1px solid green;height:40px;width:190px;float:left">23</div>
	</div>
	
	<div id="row3" style="clear:both;">
		<div id="c1" style="border:1px solid green;height:40px;width:200px;float:left">31</div>
		<div id="c2" style="border:1px solid green;height:40px;width:100px;float:left">32</div>
		<div id="c3" style="border:1px solid green;height:40px;width:380px;float:left">33</div>
	</div>
	
	<div id="row4" style="clear:both;">
		<div id="d1" style="border:1px solid green;height:40px;width:110px;float:left">41</div>
		<div id="d2" style="border:1px solid green;height:40px;width:90px;float:left">42</div>
		<div id="d3" style="border:1px solid green;height:40px;width:480px;float:left">43</div>
	</div>
  </div>
 </body>
</html>

Open in new window

Avatar of vidhubala
vidhubala

ASKER

amazing. thanks so much.