Solved

class change on the fly

Posted on 2008-10-28
8
186 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
 

Author Comment

by:vidhubala
ID: 22828520
heilo,

it fails in i.e 6. firefox ok.
 thanks.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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 …

932 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now