Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 326
  • Last Modified:

keyboard navigation menu

i have a hide and show menu which works on keyboard navigation.
right now it works only for the first submenu. how to make it work for all the menus.
also i want to highlight the topmenu item when the respective submenu is shown.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 
<style>
td {
	color:white;
	font: 20px bold arial;
	border-bottom:1px solid #fff;
}
 
tr.rowhighlight {
      background-color: green;
}
tr.rowdefault {
      background-color: #000;
}
.selected {
	background-color: orange;
}
</style>
 
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      if (key == 38) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow - 1;
            if (intSelectedRow == 0) intSelectedRow = intRowCount - 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight ";
            window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
      }
      if (key == 40) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow + 1;
            if (intSelectedRow == intRowCount) intSelectedRow = 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight ";
            window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
      }
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
</script>
 
<script type="text/javascript">
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
        selected = id;
 }
document.onkeyup = function(e) {
	if(!e) e = window.event;
	
	switch(e.keyCode ? e.keyCode : e.charCode) {
	case 39: //right arrow
		moveRight();
		dropdown(selected >= menulist.length-1 ? 0 : selected+1);
		break;
	case 37: //left arrow
		moveLeft();
		dropdown(selected <= 0 ? menulist.length-1 : selected-1);
		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 = "selected";
	prev = el;
}
 
function moveRight() {
	if(!prev) return;
	
	var next = getRightCell(prev);
	
	if(!next) {
		alert("Already at end of row!");
		return;
	}
	
	select(next);
}
 
function moveLeft() {
	if(!prev) return;
	
	var next = getLeftCell(prev);
	
	if(!next) {
		alert("Already at beginning of row!");
		return;
	}
	
	select(next);
}
 
function moveUp() {
	if(!prev) return;
	
	var col = getColNum(prev);
	var nrow = getUpRow(prev);
	
	if(!nrow) {
		alert("Already top of column!");
		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) {
		alert("Already at bottom of column!");
		return;
	}
	
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
//Calculate potential difference in cells per row
function getCellDiff(cell, nrow) {
	var diff = 0;
	var index = 0;
	for(i=0;i<nrow.cells.length;i++){
		if(index==cell) break;
		if(index>cell) {
			diff--;
			break;
		}
		if(nrow.cells[i].colSpan) index += nrow.cells[i].colSpan;
		else index++;
		diff++;
	}
	
	return diff;
}
 
function getUpRow(el) {
	var nrow = el.parentNode.previousSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.previousSibling;
	return nrow;
}
 
function getDownRow(el) {
	var nrow = el.parentNode.nextSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.nextSibling;
	return nrow;
}
 
function getLeftCell(el) {
	var lcell = el.previousSibling;
	if(!lcell) return null;
	if(lcell.nodeType == 3) lcell = lcell.previousSibling;
	return lcell;
}
 
function getRightCell(el) {
	var rcell = el.nextSibling;
	if(!rcell) return null;
	if(rcell.nodeType == 3) rcell = rcell.nextSibling;
	return rcell
}
 
//Return column number of el
function getColNum(el) {
	var num = 0;
	while(el = el.previousSibling) {
		if(el.nodeType != 1) continue;
		else if(el.colSpan) num += el.colSpan;
		else num++;
	}
	return num;
}
</script>
 
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="0" cellspacing="1" border="1" width="900">
	<tr>
			<td id="1" tabIndex="1" width="220" height="35" onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="green">tretre</td>
			<td tabIndex="2" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">rter</td>
			<td tabIndex="3" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">eter</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="TR1" class="ROWHIGHLIGHT">
									   <td>423</td>
								   </tr>
								   <tr id="TR2" class="ROWDEFAULT">
										<td>342</td>
								   </tr>
								   <tr id="TR3" class="ROWDEFAULT">
										<td>234</td>
								   </tr>
								   <tr id="TR4" class="ROWDEFAULT">
										<td>4234</td>
								   </tr>
								   <tr id="TR5" class="ROWDEFAULT">
										<td>2423</td>
									</tr>	  
						  </table>
					</div>
				</td>
				<td>
		   
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>tert</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>erter</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>terte</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>4534</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>43534</td>
								</tr>
								<tr id="TR4" class="ROWDEFAULT">
								<td>3534</td>
								</tr>
								<tr id="TR5" class="ROWDEFAULT">
								<td>43534</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>dfgdfg</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
			
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1" class="ROWHIGHLIGHT">
								<td>34324</td>
								</tr>
								<tr id="TR2" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3" class="ROWDEFAULT">
								<td>345345</td>
								</tr>
								<tr id="TR4" class="ROWDEFAULT">
								<td>3543</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

0
vidhubala
Asked:
vidhubala
  • 4
  • 4
1 Solution
 
jose_juanCommented:
Hi,

your problem is

document.getElementById("tr" + intSelectedRow)

statement. Your try use a tr-N object but N object, not exists!

Check correct values for intSelectedRow and initialite it correctly.

e.g.

if( intSelectedRow < 0 || intSelectedRow > max )
   intSelectedRow = 0;

Regards.
0
 
vidhubalaAuthor Commented:
just tried. didnt help.  can u pl insert in my code and show it?
0
 
jose_juanCommented:
Uhm...

your first problem are you call "tr" + ..., javascript are case sensitive use "TR" + ... (or rename <tr id="TR"... to <tr id="tr"...).

your second problem was you have write
 

  ...className = "rowhighlight     "

but spaces not is correct put

  ...className = "rowhighlight"

your third problem are you higlight only for the first menu (up/down only run on first menu).

your fourth problem...

On the other hand, your schema not is the best way to do it. It is the reason for I suggest to you read examples in the net.

Do not be discouraged, but have patience to learn.

Regards.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
vidhubalaAuthor Commented:
made the suggested changes. didnt help. this was an example in the net and i am trying to customize. not getting resolved.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      if (key == 38) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow - 1;
            if (intSelectedRow == 0) intSelectedRow = intRowCount - 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight";
      }
      if (key == 40) {  
            //up
            document.getElementById("tr" + intSelectedRow).className = "trdefault";
            intSelectedRow = intSelectedRow + 1;
            if (intSelectedRow == intRowCount) intSelectedRow = 1;
            document.getElementById("tr" + intSelectedRow).className = "rowhighlight";
           // window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
	  }
	  if (key == 39) {
			dropdown(selected >= menulist.length-1 ? 0 : selected+1); 
      }
 
	  if (key == 37) {
			dropdown(selected <= 0 ? menulist.length-1 : selected-1); 
	  }
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
		document.getElementById("tr" + intSelectedRow).className = "trdefault";
        selected = id;
 }
</script>
<style type="text/css">
tr.rowhighlight {
      background-color: orange;
}
tr.rowdefault {
      background-color: #000;
}
 
td {
		color:white;
		font: 20px bold arial;
		border-bottom:1px solid #fff;
	}
</style>
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="10" cellspacing="10" border="0" width="1000">
	<tr>
			<td id="1" tabIndex="1" width="200" height="35" align="center" bgcolor="orange">1</td>
			<td id="2" tabIndex="2" width="200" height="35" align="center"  bgcolor="black">2</td>
			<td id="3" tabIndex="3" width="200" height="35"  align="center"  bgcolor="black">3</td>
			<td id="4" tabIndex="4" width="200" height="35" align="center" bgcolor="black">4</td>
			<td id="5" tabIndex="4" width="200" height="35" align="center" bgcolor="black">5</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="tr1" class="ROWHIGHLIGHT">
									   <td>11</td>
								   </tr>
								   <tr id="tr2" class="ROWDEFAULT">
										<td>12</td>
								   </tr>
								   <tr id="tr3" class="ROWDEFAULT">
										<td>13</td>
								   </tr>
								   <tr id="tr4" class="ROWDEFAULT">
										<td>14</td>
								   </tr>
								   <tr id="tr5" class="ROWDEFAULT">
										<td>15</td>
									</tr>	  
						  </table>
					</div>
		   
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>21</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>22</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>23</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>31</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>32</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>33</td>
								</tr>
								<tr id="tr4" class="ROWDEFAULT">
								<td>34</td>
								</tr>
								<tr id="tr5" class="ROWDEFAULT">
								<td>35</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>41</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>42</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>43</td>
							  </tr>
						  </table>
					</div>
			
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="tr1" class="ROWHIGHLIGHT">
								<td>51</td>
								</tr>
								<tr id="tr2" class="ROWDEFAULT">
								<td>52</td>
								</tr>
								<tr id="tr3" class="ROWDEFAULT">
								<td>53</td>
								</tr>
								<tr id="tr4" class="ROWDEFAULT">
								<td>54</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

0
 
jose_juanCommented:
Uhm...

What do you want? A complete solution? I think this is not the way.
You must do the job.

(I don't know if a administrator will warn me... but)

one little more advanced version (see code).

you should strive

Good luck!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 
<style>
td {
	color:white;
	font: 20px bold arial;
	border-bottom:1px solid #fff;
}
 
tr.rowhighlight {
      background-color: green;
}
tr.rowdefault {
      background-color: #000;
}
.selected {
	background-color: orange;
}
</style>
 
<script type="text/javascript">
intRowCount = 6;
intSelectedRow = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
 
      var step = 0
 
      if (key == 38) step = -1
      if (key == 40) step = +1
 
      var op0 = document.getElementById("TR" + intSelectedRow + "_" + (selected+1))
      var op1 = document.getElementById("TR" + (intSelectedRow+step) + "_" + (selected+1))
 
      if( op1 == null )
      	return; // not exists
 
		op0.className = "trdefault";
		op1.className = "rowhighlight";
		intSelectedRow += step
 
		window.location.href = '#' + whichRow(intSelectedRow, intRowCount);
}
function whichRow(row, maxRow) {
      if (row < 4) {
            return 1;
      } else if (row > maxRow - 2) {
            return maxRow - 4;
      } else {
            return row - 4;
      }
}
</script>
 
<script type="text/javascript">
 
 var menulist = ['menu1', 'menu2', 'menu3', 'menu4', 'menu5'];
 var selected = -1;
 function dropdown(id){
        for(i=0;i<menulist.length;i++){
                document.getElementById(menulist[i]).style.display='none';
        }
        document.getElementById(menulist[id]).style.display='';
        selected = id;
 }
document.onkeyup = function(e) {
	if(!e) e = window.event;
 
	switch(e.keyCode ? e.keyCode : e.charCode) {
	case 39: //right arrow
		moveRight();
		dropdown(selected >= menulist.length-1 ? 0 : selected+1);
		break;
	case 37: //left arrow
		moveLeft();
		dropdown(selected <= 0 ? menulist.length-1 : selected-1);
		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 = "selected";
	prev = el;
}
 
function moveRight() {
	if(!prev) return;
 
	var next = getRightCell(prev);
 
	if(!next) {
		alert("Already at end of row!");
		return;
	}
 
	select(next);
}
 
function moveLeft() {
	if(!prev) return;
 
	var next = getLeftCell(prev);
 
	if(!next) {
		alert("Already at beginning of row!");
		return;
	}
 
	select(next);
}
 
function moveUp() {
	if(!prev) return;
 
	var col = getColNum(prev);
	var nrow = getUpRow(prev);
 
	if(!nrow) {
		alert("Already top of column!");
		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) {
		alert("Already at bottom of column!");
		return;
	}
 
	var cellDiff = getCellDiff(col, nrow);
	select(nrow.cells[cellDiff]);
}
 
//Calculate potential difference in cells per row
function getCellDiff(cell, nrow) {
	var diff = 0;
	var index = 0;
	for(i=0;i<nrow.cells.length;i++){
		if(index==cell) break;
		if(index>cell) {
			diff--;
			break;
		}
		if(nrow.cells[i].colSpan) index += nrow.cells[i].colSpan;
		else index++;
		diff++;
	}
 
	return diff;
}
 
function getUpRow(el) {
	var nrow = el.parentNode.previousSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.previousSibling;
	return nrow;
}
 
function getDownRow(el) {
	var nrow = el.parentNode.nextSibling;
	if(!nrow) return null;
	if(nrow.nodeType == 3) nrow = nrow.nextSibling;
	return nrow;
}
 
function getLeftCell(el) {
	var lcell = el.previousSibling;
	if(!lcell) return null;
	if(lcell.nodeType == 3) lcell = lcell.previousSibling;
	return lcell;
}
 
function getRightCell(el) {
	var rcell = el.nextSibling;
	if(!rcell) return null;
	if(rcell.nodeType == 3) rcell = rcell.nextSibling;
	return rcell
}
 
//Return column number of el
function getColNum(el) {
	var num = 0;
	while(el = el.previousSibling) {
		if(el.nodeType != 1) continue;
		else if(el.colSpan) num += el.colSpan;
		else num++;
	}
	return num;
}
</script>
 
 </head>
 <body onkeydown="pressKey(event);document.getElementById('1').focus();">
<table cellpadding="0" cellspacing="1" border="1" width="900">
	<tr>
			<td id="1" tabIndex="1" width="220" height="35" onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="green">tretre</td>
			<td tabIndex="2" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">rter</td>
			<td tabIndex="3" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">eter</td>
			<td tabIndex="4" width="220" height="35"  onclick="dropdown(this.tabIndex-1);" align="center" onMouseOver="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='black'" bgcolor="black">tert</td>
	</tr>
	<tr>
			<td align="left">
					<div id="menu1" style="display:none;width:220px;background-color:#fff">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
								   <tr id="TR1_1" class="ROWDEFAULT">
									   <td>423</td>
								   </tr>
								   <tr id="TR2_1" class="ROWDEFAULT">
										<td>342</td>
								   </tr>
								   <tr id="TR3_1" class="ROWDEFAULT">
										<td>234</td>
								   </tr>
								   <tr id="TR4_1" class="ROWDEFAULT">
										<td>4234</td>
								   </tr>
								   <tr id="TR5_1" class="ROWDEFAULT">
										<td>2423</td>
									</tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu2" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_2" class="ROWDEFAULT">
								<td>tert</td>
								</tr>
								<tr id="TR2_2" class="ROWDEFAULT">
								<td>erter</td>
								</tr>
								<tr id="TR3_2" class="ROWDEFAULT">
								<td>terte</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu3" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_3" class="ROWDEFAULT">
								<td>4534</td>
								</tr>
								<tr id="TR2_3" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3_3" class="ROWDEFAULT">
								<td>43534</td>
								</tr>
								<tr id="TR4_3" class="ROWDEFAULT">
								<td>3534</td>
								</tr>
								<tr id="TR5_3" class="ROWDEFAULT">
								<td>43534</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu4" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_4" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR2_4" class="ROWDEFAULT">
								<td>gdfgdf</td>
								</tr>
								<tr id="TR3_4" class="ROWDEFAULT">
								<td>dfgdfg</td>
							  </tr>
						  </table>
					</div>
				</td>
				<td>
 
					<div id="menu5" style="display:none;width:220px">
						   <table width="100%" bgcolor="black" cellspacing="1" cellpadding="10">
							   <tr id="TR1_5" class="ROWDEFAULT">
								<td>34324</td>
								</tr>
								<tr id="TR2_5" class="ROWDEFAULT">
								<td>34543</td>
								</tr>
								<tr id="TR3_5" class="ROWDEFAULT">
								<td>345345</td>
								</tr>
								<tr id="TR4_5" class="ROWDEFAULT">
								<td>3543</td>
							  </tr>
						  </table>
					</div>
			</td>
			<td colspan="4" width="780"></td>
		</tr>
	</table>
 </body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
thanks for time jo. i was also working in many different ways to get to the shape i got. but it needs some real expert eye to figure the problem as its driven by keys, by mouse its a cake walk. also i donot want the sub menu items to go under the respective top menu items.
0
 
jose_juanCommented:
Hi,

a complete menu controller not is trivial, I suggest (again) search and see examples.

to control keys like "hotKeys" you can test my next example code (see code).

Good luck!

<html>
<head>
<script>
 
	// Internet Explorer is different...
	var IE = window.Event == null;
 
	var cCtrl, cAlt, cShift
 
	function getid(id) {
		return document.getElementById(id);
	}
 
	function SetConfig() {
		cCtrl = getid("sCtrl").checked;
		cAlt = getid("sAlt").checked;
		cShift = getid("sShift").checked;
		ShowConfig();
	}
 
	function GetConfig() {
		var w = '';
		if( cCtrl ) w += "Ctrl+";
		if( cAlt ) w += "Alt+";
		if( cShift ) w += "Shift+";
		return "<br>You must press <b>" + w + "Key</b><br><br>Take care when press a key, some will be close your browser! (or other effects)<br><br>";
	}
 
	function ShowConfig() {
		getid('msg').innerHTML = GetConfig();
	}
 
	function Body_OnKeyPress(e) {
		var k = IE ? window.event.keyCode : e.which;
		var c = IE ? window.event.ctrlKey : e.ctrlKey;
		var a = IE ? window.event.altKey : e.altKey;
		var s = IE ? window.event.shiftKey : e.shiftKey;
 
		if( ( c || !cCtrl ) && ( a || !cAlt ) && ( s || !cShift ) )
			getid("msg").innerHTML = GetConfig() + "<br>Your key code is <b>" + k + "</b>";
	}
 
</script>
</head>
<body onkeypress="Body_OnKeyPress(event)" onload="SetConfig()">
 
<div>
Check <b>Ctrl</b>&nbsp;<input id="sCtrl" type="checkbox" onclick="SetConfig()" checked>&nbsp;
Check <b>Alt</b>&nbsp;<input id="sAlt" type="checkbox" onclick="SetConfig()" checked>&nbsp;
Check <b>Shift</b>&nbsp;<input id="sShift" type="checkbox" onclick="SetConfig()" checked>&nbsp;
</div>
 
<div id="msg"></div>
 
</body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
thanks jose.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now