vidhubala
asked on
class change on the fly
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.
roundedge-blue-right.gif
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>
roundedge-blue-left.gifroundedge-blue-right.gif
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
hi heilo
image looks good. but the key the navigation is not happening, just like the other one i said. pl help.
thanks
image looks good. but the key the navigation is not happening, just like the other one i said. pl help.
thanks
ASKER
heilo,
it fails in i.e 6. firefox ok.
thanks.
it fails in i.e 6. firefox ok.
thanks.
ASKER
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?
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?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
thanks guys. is it possible to use my logic and get the same result. that will help me in a big way.
ASKER
Open in new window