Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

class change on the fly

i have a menu using  we can navigate using down key.
when its highlighted i want to change the orange background to the curve button style shown below (good style) without affecting the logic.

pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script type="text/javascript">
var selected = 1;
var selectedCol = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      var new = selected;
      var newCol = selectedCol;
 
      if (key == 38) {  
            //up
	    new = selected - 1;
      }
      else if (key == 40) {  
            //down
            new = selected + 1;
      }    
       
		if(document.getElementById("tr" + newCol+""+new) != null) {
		// Unhighlight old 
		if(document.getElementById("tr" + selectedCol+""+selected) != null) {
			document.getElementById("tr" + selectedCol+""+selected).className = "default";
		}
			document.getElementById("tr" + newCol+""+new).className = "highlight";
			selected = new;
	}
}
</script>
<style type="text/css">
 
 
.highlight {
      background-color: orange;
}
.default {
      background-color: #000;
}
 
td {
	color:white;
	font: 20px bold arial;
	border-bottom:1px solid #fff;
}
</style>
<style type="text/css">
	a.boldbuttons{
	background: transparent url('roundedge-blue-left.gif') no-repeat top left;
	display: block;
	float: left;
	font: bold 13px Arial; 
	line-height: 22px; 
	height: 30px; 
	padding-left: 8px; 
	text-decoration: none;
	width: 200px;
	}
	a.boldbuttons span{
	background: transparent url('roundedge-blue-right.gif') no-repeat top right;
	display: block;
	padding: 4px 10px 4px 2px; 
	color:#fff;
	}
	.buttonwrapper{ 
	overflow: hidden; 
	width: 200px;
}
 
</style>
 </head>
 <body onkeydown="pressKey(event);">
   <table width="200px" bgcolor="black" cellspacing="1" cellpadding="10">
		   <tr id="tr11" class="highlight">
			   <td>11</td>
		   </tr>
		   <tr id="tr12" class="default">
				<td>12</td>
		   </tr>
		   <tr id="tr13" class="default">
				<td>13</td>
		   </tr>
		   <tr id="tr14" class="default">
				<td>14</td>
		   </tr>
		   <tr id="tr15" class="default">
				<td>15</td>
			</tr>	  
   </table>	
   <br />
   <br />
 
<TABLE>
	<TR>
		<TD><div class="buttonwrapper">
				<a class="boldbuttons" href=""><span>good style </span></a>
			</div>
		</TD>
	</TR>
</TABLE>
 
</body>
</html>

Open in new window

roundedge-blue-left.gif
roundedge-blue-right.gif
0
vidhubala
Asked:
vidhubala
  • 5
  • 2
2 Solutions
 
vidhubalaAuthor Commented:
pl use this code. the first one had a bug.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script type="text/javascript">
var selectedRow = 1;
var selectedCol = 1;
function pressKey(e) {
      var key = (e.keyCode)? e.keyCode : e.which;
      var newRow = selectedRow;
      var newCol = selectedCol;
 
      if (key == 38) {  
            //up
	    newRow = selectedRow - 1;
      }
      else if (key == 40) {  
            //down
            newRow = selectedRow + 1;
      }    
       
		if(document.getElementById("tr" + newCol+""+newRow) != null) {
		// Unhighlight old row
		if(document.getElementById("tr" + selectedCol+""+selectedRow) != null) {
			document.getElementById("tr" + selectedCol+""+selectedRow).className = "rowdefault";
		}
			document.getElementById("tr" + newCol+""+newRow).className = "rowhighlight";
			selectedRow = newRow;
	}
}
</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>
<style type="text/css">
	a.boldbuttons{
	background: transparent url('roundedge-blue-left.gif') no-repeat top left;
	display: block;
	float: left;
	font: bold 13px Arial; 
	line-height: 22px; 
	height: 30px; 
	padding-left: 8px; 
	text-decoration: none;
	width: 200px;
	}
	a.boldbuttons span{
	background: transparent url('roundedge-blue-right.gif') no-repeat top right;
	display: block;
	padding: 4px 10px 4px 2px; 
	color:#fff;
	}
	.buttonwrapper{ 
	overflow: hidden; 
	width: 200px;
}
 
</style>
 </head>
 <body onkeydown="pressKey(event);">
   <table width="200px" bgcolor="black" cellspacing="1" cellpadding="10">
		   <tr id="tr11" class="ROWHIGHLIGHT">
			   <td>11</td>
		   </tr>
		   <tr id="tr12" class="ROWDEFAULT">
				<td>12</td>
		   </tr>
		   <tr id="tr13" class="ROWDEFAULT">
				<td>13</td>
		   </tr>
		   <tr id="tr14" class="ROWDEFAULT">
				<td>14</td>
		   </tr>
		   <tr id="tr15" class="ROWDEFAULT">
				<td>15</td>
			</tr>	  
   </table>	
   <br />
   <br />
 
<TABLE>
	<TR>
		<TD><div class="buttonwrapper">
				<a class="boldbuttons" href=""><span>good style </span></a>
			</div>
		</TD>
	</TR>
</TABLE>
 
</body>
</html>

Open in new window

0
 
hieloCommented:
Note: the width of your right image is wider than the original width of the table(200px) so I used:
#menu{width:330px;}

if you need a 200px width table, you will need to resize your image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
 
<style type="text/css">
#menu{width:330px;}
#menu tbody tr td div{padding:3px;}
.highlightL{margin:0px;padding:0px;line-height:28px;color:white;background:transparent url('roundedge-blue-left.gif') scroll no-repeat top left;}
.highlight{margin:0px;padding:0px;line-height:28px;color:white;background:transparent url('roundedge-blue-right.gif') scroll no-repeat top right;}
.inactive,.inactiveL{line-height:28px;background-color:black;color:white;}
</style>
 
<script type="text/javascript">
window.onload=init;
function init(){
	menuTable = document.getElementById("menu");
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
		menuTable.rows[i].cells[0].className="inactive";
	menuTable.rows[0].cells[0].className="highlightL";
	menuTable.rows[0].cells[0].firstChild.className="highlight";
}
 
function highlight(e){
	var key = (e.keyCode)? e.keyCode : e.which;
	var prev=0;
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
	{
		if( menuTable.rows[i].cells[0].className=="highlightL")
		{
			prev=i;
			menuTable.rows[i].cells[0].className="inactive";
			menuTable.rows[i].cells[0].firstChild.className="inactiveL";
			break;
		}
	}
	if( key==38)
		prev=(--prev)%menuTable.rows.length;
	else if( key==40)
		prev=(++prev)%menuTable.rows.length;
	prev = (prev < 0 ? menuTable.rows.length-1 : prev)
	menuTable.rows[ prev ].cells[0].className="highlightL";	
	menuTable.rows[ prev ].cells[0].firstChild.className="highlight";	
}
</script>
</head>
<body onkeypress="highlight(event)">
	<table id="menu">
		<tbody>
			<tr><td><div>a</div></td></tr>
			<tr><td><div>b</div></td></tr>
			<tr><td><div>c</div></td></tr>
			<tr><td><div>d</div></td></tr>
		</tbody>
	</table>
</body>
</html>

Open in new window

0
 
vidhubalaAuthor Commented:
hi heilo

image looks good. but the key the navigation is not happening, just like the other one i said. pl help.

thanks
0
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.

 
vidhubalaAuthor Commented:
heilo,

it fails in i.e 6. firefox ok.
 thanks.
0
 
vidhubalaAuthor Commented:
hi heilo

u changed the whole code. so may not help much and will affect other code in the same page. is it possible to just change the css?
0
 
sh0eCommented:
Yes, hielo basically rewrote the code.  Quite nicely done and clean.
Anyhow, fixed it to work properly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
<script type="text/javascript">
window.onload=init;
function init(){
	menuTable = document.getElementById("menu");
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
		menuTable.rows[i].cells[0].className="inactive";
	menuTable.rows[0].cells[0].className="highlightL";
	menuTable.rows[0].cells[0].firstChild.className="highlight";
}
 
function pressKey(e) {
	var key = (e.keyCode)? e.keyCode : e.which;
	var prev=0;
	for( var i=0, limit=menuTable.rows.length; i < limit; ++i)
	{
		if( menuTable.rows[i].cells[0].className=="highlightL")
		{
			prev=i;
			menuTable.rows[i].cells[0].className="inactive";
			menuTable.rows[i].cells[0].firstChild.className="inactiveL";
			break;
		}
	}
	if( key==38)
		prev=(--prev)%menuTable.rows.length;
	else if( key==40)
		prev=(++prev)%menuTable.rows.length;
	prev = (prev < 0 ? menuTable.rows.length-1 : prev)
	menuTable.rows[ prev ].cells[0].className="highlightL";	
	menuTable.rows[ prev ].cells[0].firstChild.className="highlight";	
}
</script>
 
<style type="text/css">
#menu{width:330px;}
#menu tbody tr td div{padding:3px;}
.highlightL{margin:0px;padding:0px;line-height:28px;color:white;background:transparent url('roundedge-blue-left.gif') scroll no-repeat top left;}
.highlight{margin:0px;padding:0px;line-height:28px;color:white;background:transparent url('roundedge-blue-right.gif') scroll no-repeat top right;}
.inactive,.inactiveL{line-height:28px;background-color:black;color:white;}
</style>
 
 </head>
 <body onkeydown="pressKey(event);">
	<table id="menu">
		<tbody>
			<tr><td><div>a</div></td></tr>
			<tr><td><div>b</div></td></tr>
			<tr><td><div>c</div></td></tr>
			<tr><td><div>d</div></td></tr>
		</tbody>
	</table>
 
</body>
</html>

Open in new window

0
 
sh0eCommented:
Oh, and make sure hielo gets the points.  He really went out of his way to write good code, even though he probably knew there was a chance the person he was writing it for may not even have wanted nor appreciated him rewriting it.  He deserves it.
0
 
vidhubalaAuthor Commented:
thanks guys. is it possible to use my logic and get the same result. that will help me in a big way.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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