Mouseover Background Change with Alternating Row Colors

houston08

Basically, what the title says..

I want to have alternating Row colors, with a Mouseover "Highlight" effect, a simple background color change. And the whole row will be a link, but I will work on the link part later.

So far, I can only get the Mouseover to work if I take out the Alternating Colors, and all the codes I tryed, only, at most, half-way worked.

This is the code I'm using, just plain and simple colors:


for($i = 0; $i < $limit; $i++){
for ($count = 1; $row = mysql_fetch_assoc ($results);++$count) {
  if ($count & 1) {
   $color = "yellow";
   $font = "black";
  } else {
   $color = "white";
   $font = "black";
  }

So, how can I intergrate a mouseover background change with this?
If you need more code, no problem, 😉

Thanks!

bogu

mouseover and mouseout is a javascript event and has nothing to do with php...
problems with javascript are posted in here: ClientSide Technologies
it should be somthing like this:

<table width="100%">
<tr onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
</table>

houston08

well, see, thats the problem, that should highlights individual cells, or at least thats what it is doing for me, but, thats not what I need, I need to to highlight the whole row, so I would need this script to work WITH PHP somehow.

What I think may be happening, is that the code from PHP for the alternating background is somehow locking the background row color, since each row color is dynamically generated.

So, how can I get this to work with PHP, where I have my alternating row colors in PHP, and Javascript Highlights each row on mouseover and mouseout?

bogu

And what is the problem with alternating color?

<table width="100%">
<?php
for($i = 0; $i < 10; $i++) { 
	if ($i%2) {
		$color = "#eeeeee";
	} else {
		$color = "#ffffff";
	}
?>
<tr style="background-color:<?=$color;?>;" onmouseover="this.style.backgroundColor='#ff0000';" onmouseout="this.style.backgroundColor='<?=$color;?>';">
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
<?php
}
?>
</table>

JPnyc

Use CSS for this. Put a hover state on your tr elements

houston08

EDIT: Works for IE, but not firefox, does that mean I'll have to get browser info and then use dynamic content for that?

Alright, I like the new code you gave me bogu, cleaner to me, and easier to understand. 🙂

Here's what my code is now..


<?php
for($i = 0; $i < $limit; $i++) {
for($count = 1; $row = mysql_fetch_assoc ($results); ++$count) {
    if ($count & 1) {
        $color = "#ffffff";
    } else {
        $color = "#3399ff";
    }


$printthis = "<tr style=\"background-color:'$color';\" onmouseover=\"this.style.backgroundColor='#ffff00';\" onmouseout=\"this.style.backgroundColor='$color';\">
<td align=\"center\">$row[location]</td>
<td align=\"center\">$row[earnings]</td>
<td align=\"center\">$row[asking]</td>
<td align=\"center\">$row[contact]</td>
<td align=\"center\">$row[phone]</td>
</tr>";

print $printthis;
}
}

?>

What is happening now, is the highlighting works, but the Alternating Background colors do not appear till I have my cursor over the cell, or I "Hightlight" it.

I can't think of what I did wrong, or what to change.

Thanks.

bogu

$i=0;
while( $row = mysql_fetch_assoc ($results) ) { 
    if ( (($i++)%2) ) { 
        $color = "#ffffff"; 
    } else { 
        $color = "#3399ff"; 
    } 

$printthis = "<tr style=\"background-color:'{$color}';\" onmouseover=\"this.style.backgroundColor='#ffff00';\" onmouseout=\"this.style.backgroundColor='{$color}';\"> ";
$printthis.= "<td align=\"center\">{$row['location']}</td>";
$printthis.= "<td align=\"center\">{$row['earnings']}</td>";
$printthis.= "<td align=\"center\">{$row['asking']}</td>";
$printthis.= "<td align=\"center\">{$row['contact']}</td>";
$printthis.= "<td align=\"center\">{$row['phone']}</td>";
$printthis.= "</tr>"; 
print $printthis; 
}

try it like this ...

Weedpacket

Using hover: on your tr elements as JPnyc suggests would work on Firefox (but not IE)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
tr.odd{background-color:white;}
tr.even{background-color:red;}
tr:hover{background-color:blue;}
-->
</style>
</head>
<body>
<table>
<tr class="odd"><td>This</td></tr>
<tr class="even"><td>This</td></tr>
<tr class="odd"><td>This</td></tr>
<tr class="even"><td>This</td></tr>
<tr class="odd"><td>This</td></tr>
<tr class="even"><td>This</td></tr>
</table>
</body>
</html>

Note that the only thing that changes from row to row is the class attribute. Perhaps combining this with the IE workaround...

(Thinks: in an ideal world CSS3 would be sufficiently supported that the styles would be

tr:nth-child(2n){background-color:red;}
tr:nth-child(2n+1){background-color:white;}
tr:hover{background-color:blue;}

and there wouldn't need to be any server code needed (or client code, for that matter) to make table rows alternate in colour. We live in hope, eh? Unthinks.)

Edit: In Javascript You can give new properties to existing objects just by saying so....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
tr.odd{background-color:white;}
tr.even{background-color:red;}
-->
</style>
</head>
<body>
<table>
<tr class="odd" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
<tr class="even" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
<tr class="odd" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
<tr class="even" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
<tr class="odd" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
<tr class="even" onmouseover="this.oldBackgroundColor=this.style.backgroundColor;this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=this.oldBackgroundColor"><td>This</td></tr>
</table>
</body>
</html>

It gets tedious repeating the same mouseover/mouseout code over and over, and monumentally ugly to boot - especially if you want to change more than one style aspect. So employ the old programming rule of thumb: if it's worth doing twice it's worth writing a program for.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
tr.odd{background-color:white;}
tr.even{background-color:red;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function over(row)
{
	row.oldBackgroundColor = row.style.backgroundColor;
	row.style.backgroundColor = 'blue';
}
function out(row)
{
	row.style.backgroundColor = row.oldBackgroundColor;
}
//-->
</script>
</head>
<body>
<table>
<tr class="odd" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
<tr class="even" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
<tr class="odd" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
<tr class="even" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
<tr class="odd" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
<tr class="even" onmouseover="over(this);" onmouseout="out(this);"><td>This</td></tr>
</table>
</body>
</html>

houston08

bogu, you code had the same effect as last, works in IE, but not FireFox.

Weedpacket, I havn't tried it yet, but I'm pretty sure none of those codes will work.
Partly because each row is dynamically generated, and as such the bgcolor is dynamically assigned, I'm not to sure how to do this yet, but I'm going to try to make it work using some of your codes.

I think my best bet would be to GET the browser type, and then display that information according to browser, that's not to hard, is it?

bogu

houston08 wrote:
bogu, you code had the same effect as last, works in IE, but not FireFox.

I tested in IE 6 and FireFox 1.5.0.7 and is working, what kind of FireFox do u have?

Check if you have javascript enabled in FireFox ( Tools >> Options >> Content and the check box for "Enabled JavaScript" should be checked) ...

JPnyc

He said the whole row might be a link. If that's the case, the css hover will work in IE as well. If not, then it won't

Weedpacket

houston08 wrote:
Weedpacket, I havn't tried it yet, but I'm pretty sure none of those codes will work.
Partly because each row is dynamically generated, and as such the bgcolor is dynamically assigned,

Well yeah; I figured you'd be smart enough to figure out that part of it yourself (how to alternate the class attribute value), so I just did something that showed the final effect. Of course, I might have been hallucinating when I checked it in IE and Firefox....

JPnyc wrote:
He said the whole row might be a link. If that's the case, the css hover will work in IE as well. If not, then it won't

But you can't wrap a link around an entire table row (at least, not without breaking HTML); you have to have separate links in each individual cell.

JPnyc

No, that's true. But you can put both tr class and the td class on the same hover rules.
I don't think I fully understand what he's trying to do here.

houston08

alright, thanks weedpacket, I got the code to work for both IE and FF using your examples.
Now, I have to link it, I know you say it can't be done, but I swear I've seen it somewhere.

Couldn't you like attach something to the hover, when you have, a link is included?

Weedpacket

Well, the standard-compliant approach would be as I mentioned - to have every cell in the table contain a link (the one relevant for the row the cell appears in).

You could I guess use an onclick attribute in the <tr>, but I'd be reluctant to do that because using Javascript to implement links is an accessibility no-no. While it won't kill people or bots to not have stylised rollover effects, not being able to use the links on the page will not be a good thing at all. (Yada yada, most people have Javascript these days yada yada, but some people still turn it off, web spiders usually don't implement Javascript at all (I can't think of any that do), and while screen readers recognise <a href=> as links they won't find the link buried in the javascript of a <tr> element.)

houston08

Well, taking that into consideration, couldn't I just add some kind of javascript checker, to check if enabled, if so, continue, if not, stop, or goto a different page?

And how would i make the link hand cursor show in FF? I added style="cursor:pointer;cursor:hand" in my <tr> but it only shows in IE.

Weedpacket

houston08 wrote:
Well, taking that into consideration, couldn't I just add some kind of javascript checker, to check if enabled, if so, continue, if not, stop, or goto a different page?

You could I guess, though I don't see how that would help restore functionality. Why not just use links in the table cells?

And how would i make the link hand cursor show in FF?

That's because "cursor:hand" is a Microsoft corruption of the standard, which specifies "pointer".

bogu

houston08 wrote:
Well, taking that into consideration, couldn't I just add some kind of javascript checker, to check if enabled, if so, continue, if not, stop, or goto a different page?

<noscript>
	<meta http-equiv="refresh" content="0;URL=no_javascript.html">
</noscript>

this should do ...