Solved

class change on the fly

Posted on 2008-10-28
8
192 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

776 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