Member Avatar for ErlendHL

Hi!
Here is the test page.
It works fine in Firefox and Google Chrome but not in Opera and Internet Explorer.

If you don't have Firefox or Google Chrome, I can tell you how it should be:
when you click an element, if should be lighter green, rolling out of a clicked element, it should be darker green. The same happens with elements that are not selected, ubt they are gray. But in IE and Opera, when you roll out of a selected element, it is gray.
I can't debug it in Opera because I have no debugger there, like Firebug.
I don't need to post any code because you can look at the cource code.

Please help me, thanks!

  • 2 Contributors
  • 4 Replies
  • 134 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for ErlendHL

Fixed it!
Firefox converts "#afa" to "rgb(170, 255, 170)", IE does nothing with it, etc

Member Avatar for Airshow

Congrats.

Here's a way of doing it by setting a custom attribute, selected, which gives us something reliable to test. Color changes are effected by switching class names.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="http://3rlend.com/pjatt/pjattstyle.css" rel="StyleSheet">
<style type="text/css">
* {
	font-family:sans-serif;
}
body {
	background-color:#aaf;
	margin-top:1px;
}
td {
	border:#aaa solid 2px;
}
.userButton {
	background-color:#aaa;
	width:475px;
	padding:4px;
}
.hover {
	background-color:#bbb;
}
.selected {
	background-color:#9e9;
}
.selectedHover {
	background-color:#afa;
}
</style>
</head>
<body>
<script type ="text/javascript">
var ub = 'userButton';
function rollOver_user(user_span){
	user_span.className = (user_span.selected) ? ub + ' selectedHover' : ub + ' hover';
}
function rollOut_user(user_span){
	user_span.className = (user_span.selected) ? ub + ' selected' : ub;
}
function click_user(user_span){
	user_span.selected = (!user_span.selected) ? true : false;
	user_span.className = user_span.selected ? ub + ' selectedHover' : ub + ' hover';
}
</script>

<table>
<tr><td id="user_1" onclick="click_user(this)" onmouseout="rollOut_user(this)" onmouseover="rollOver_user(this)" class="userButton">#1</td></tr>
<tr><td id="user_2" onclick="click_user(this)" onmouseout="rollOut_user(this)" onmouseover="rollOver_user(this)" class="userButton">#2</td></tr>
</table>

</body>
</html>

I'm sure that with a little more thought it could be even simpler.

Airshow

Edited by Airshow because: n/a
Member Avatar for Airshow

That's what I had in mind when I said "even simpler".

I tried it and couldn't make it work but maybe someone knows how.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.