Solved

keyboard navigation menu

Posted on 2008-10-21
8
308 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Video Tutorial help 2 51
object method as an event handler 8 77
jQuery element reference issue 2 40
close window in firefox 3 38
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

751 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