Solved

keyboard navigation menu

Posted on 2008-10-21
8
316 Views
Last Modified: 2012-05-05
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
Comment
Question by:vidhubala
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 5

Expert Comment

by:jose_juan
ID: 22774043
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
 

Author Comment

by:vidhubala
ID: 22774077
just tried. didnt help.  can u pl insert in my code and show it?
0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22774156
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:vidhubala
ID: 22776713
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
 
LVL 5

Expert Comment

by:jose_juan
ID: 22777049
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
 

Author Comment

by:vidhubala
ID: 22779659
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
 
LVL 5

Accepted Solution

by:
jose_juan earned 500 total points
ID: 22783784
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
 

Author Closing Comment

by:vidhubala
ID: 31508432
thanks jose.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

634 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question