Solved

class change on the fly

Posted on 2008-10-28
8
180 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

757 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

21 Experts available now in Live!

Get 1:1 Help Now