Solved

class change on the fly

Posted on 2008-10-28
8
201 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
  • 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

830 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