?
Solved

class change on the fly

Posted on 2008-10-28
8
Medium Priority
?
221 Views
Last Modified: 2011-10-19
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
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
  • 5
  • 2
8 Comments
 

Author Comment

by:vidhubala
ID: 22827349
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
 
LVL 82

Accepted Solution

by:
hielo earned 1800 total points
ID: 22828139
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
 

Author Comment

by:vidhubala
ID: 22828509
hi heilo

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

thanks
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

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

 

Author Comment

by:vidhubala
ID: 22828520
heilo,

it fails in i.e 6. firefox ok.
 thanks.
0
 

Author Comment

by:vidhubala
ID: 22828538
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
 
LVL 16

Assisted Solution

by:sh0e
sh0e earned 200 total points
ID: 22828571
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
 
LVL 16

Expert Comment

by:sh0e
ID: 22828579
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
 

Author Closing Comment

by:vidhubala
ID: 31510993
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

Technology Partners: We Want Your Opinion!

We value your feedback.

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

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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

765 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