Solved

class change on the fly

Posted on 2008-10-28
8
209 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 450 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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 50 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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)

732 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