Solved

keyboard navigation menu

Posted on 2008-10-21
8
288 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
  • 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now