Page 1 of 1

alternating row colors with mouseover effect

Posted: Tue Feb 21, 2006 5:24 pm
by davidprogramer

Code: Select all

<?
$bg_color="#616161";
?>

<HTML><HEAD> <script LANGUAGE="JavaScript">
function TrowOn(src,OnColor)
{
src.style.cursor = 'hand'; src.bgColor = OnColor;
}
function TrowOff(src,OffColor)
{
src.style.cursor = 'default'; src.bgColor = OffColor;
}
</script>
</HEAD>
<BODY>
<table id="mainTable">
	<tr onMouseOver="TrowOn(this,'#ffffcc');" onMouseOut="TrowOff(this, <? $bg_color ?> );">
		<td>CELL 1</td>  <td>CELL 2</td>  <td>CELL 3</td>
	</tr>
	<tr onMouseOver="TrowOn(this,'#ffffcc');" onMouseOut="TrowOff(this,'#616161');">
		<td>CELL 4/td>  <td>CELL 5/td>  <td>CELL 6/td>
	</tr>
</table>
</body>
</html>
Ok. My problem is not alternating the colors. I really already know how to do that using modulus. My real problem is trying to get the variable "$bg_color" to work. If I use a straight up hex number it works fine. But if I use a variable that is pre-defined, it doesn't work. I have changed the second row to use a hex number in this example, and if you copy the code here, you will notice that it works. But the first row will not. Any ideas?

Posted: Tue Feb 21, 2006 5:27 pm
by feyd

Code: Select all

<? $bg_color ?>
prints nothing as you may have realized.

Code: Select all

<?php echo $bg_color; ?>
does.

Posted: Tue Feb 21, 2006 5:30 pm
by pickle
You need to put it in quotes.

A simpler (perhaps cleaner?) solution would be to just toggle the row's classname, then put all the style stuff in a CSS file:

Code: Select all

<html>
  <body>
    <table>
      <tr onmouseover = "this.className='rowOn';" onmouseout = "this.className='rowOff';">
         blah blah blah

Posted: Tue Feb 21, 2006 6:44 pm
by davidprogramer
feyd wrote:

Code: Select all

<? $bg_color ?>
prints nothing as you may have realized.

Code: Select all

<?php echo $bg_color; ?>
does.
One prob. If I am already in php, how would I echo it?

i.e.

Code: Select all

echo "<tr onMouseOver="TrowOn(this,'#254961');" onMouseOut="TrowOff(this,'#616161');">";

  						echo "<tr onMouseOver="TrowOn(this,'#254961');" onMouseOut="TrowOff(this, "$bg_color");">

And pickle. I cant use a css file because the bg color is dynamic in my situation. The previous code is just examples of what I am trying to do so it is a little more readable.

Code: Select all

function row_color($p){
	if ($p % 2){
		$bg_color="#7B7B7B";
	}else{
		$bg_color="#626262";
	}
	return $bg_color;
}

Posted: Tue Feb 21, 2006 8:02 pm
by d3ad1ysp0rk
davidprogramer wrote:And pickle. I cant use a css file because the bg color is dynamic in my situation. The previous code is just examples of what I am trying to do so it is a little more readable.
Actually, that's the point..

Code: Select all

<style type="text/css">
.rowOn {background-color: #7B7B7B}
.rowOff {background-color: ##626262)
</style>

Posted: Tue Feb 21, 2006 8:05 pm
by davidprogramer
I don't think I understand. The code is inside a for loop. Here let me show you.

Code: Select all

for ($i=$cl_start; $i < $cl_start + 20; $i++)
					{
						$bg_color = row_color($i);

						echo "<tr onMouseOver=\"TrowOn(this,'#254961');\" onMouseOut=\"TrowOff(this, ".$bg_color.");\">
							<td nowrap><center>&nbsp $i</td></center>
							<td nowrap><center>&nbsp <A HREF=\"javascript:popUpClan('modules.php?name=League&file=clan_view&lid=$current_ladder&cid=$clan_id')\">$clan_tag</a></td>
							<td nowrap><center>&nbsp $clan_points</td></center>
							<td nowrap><center>&nbsp $clan_strength</td></center>
							<td nowrap><center>&nbsp $clan_honor</td></center>
							<td nowrap><center>&nbsp $clan_wins - $clan_losses</td></center>
							<td nowrap><center>&nbsp $clan_winpercent<b></b>%</td></center>
							<td nowrap><center>&nbsp $clan_streak</td></center>
						</tr>";	
					}

Code: Select all

function row_color($p){
	if ($p % 2){
		$bg_color="#7B7B7B";
	}else{
		$bg_color="#626262";
	}
	return $bg_color;
}

Posted: Tue Feb 21, 2006 8:21 pm
by ssand
You need some single quotes before your double quotes.

Code: Select all

so...   TrowOff(this, '".$bg_color."');\">
edit: actually i was working from your original code... as feyd posted (then it would work):

Code: Select all

onMouseOut="TrowOff(this, '<?php echo $bg_color; ?>' );">

Posted: Tue Feb 21, 2006 8:27 pm
by davidprogramer
ssand that worked perfect! Thank-you everyone! :)

If anyone wants to check it out go here

Posted: Wed Feb 22, 2006 2:47 am
by onion2k
Please stop using short tags. :cry: