Walter, I tried your method of applying the class to the td's and your
code was throwing an error which is most likely my fault. <g>
It's saying that "object doesn't support that method" on the
elm.addClassName('over');
PROTOTYPE:
var rows = $$('#mail tr');
$('mail').on('mouseover', 'tr', function(elm, evt){
rows.invoke('removeClassName', 'over');
elm.addClassName('over');
});
CSS:
#mail tr.over td { background-color: lightgreen; }
HTML:
<table class='form' id='mail'>
<tr>
<th align='left'>Subject:</th>
<th align='left'>From:</th>
<th align='left'>Sent:</th>
<th>Action</th>
</tr>
<tr id='$id'>
<td>$subject</td>
<td>$username</td>
<td>$sentdate</td>
<td valign='middle' align='center'>
<img src='/images/icons/delete.png' width='16' height='16'
onclick='deleteMsg(this, $id);'>
<img src='/images/icons/reply.png' width='16' height='16'
onclick='replyMsg(this, $id);'>
<img src='/images/icons/forward.png' width='16' height='16'
onclick='forwardMsg(this, $id);'>
</td>
</tr>
On Wed, Jan 2, 2013 at 12:10 AM, Walter Lee Davis <[email protected]>wrote:
> I usually have to add the color attribute to the td rather than the tr.
> You can make this change at the CSS level. Rather than using setStyle(),
> toggle the classname of the row, and then set your CSS to apply to td
> children of that class of row. For example:
>
> var rows = $$('#mytable tr');
> $('mytable').on('mouseover', 'tr', function(elm, evt){
> rows.invoke('removeClassName', 'over');
> elm.addClassName('over');
> }
>
> CSS:
> #mytable tr.over td {
> background-color: #fefefe;
> }
>
> Walter
>
> On Jan 1, 2013, at 11:55 PM, Dave Kibble wrote:
>
> > I think there's also something weird about CSS applied to table rows,
> > (I think) cells don't inherit all properties from the row they
> > 'belong' to. Make sure your HTML/CSS works in a stand-alone document
> > first to check.
> >
> > Dave
> >
> > On 1 January 2013 22:53, Phil Petree <[email protected]> wrote:
> >> I have an empty <div> that gets an ajax result that contains a table
> which
> >> looks like this:
> >>
> >> HTML:
> >> <table class='form' id='mail' width='100%' border='1'>
> >> <tr>
> >> <th>Subject:</th>
> >> <th>From:</th>
> >> <th>Sent:</th>
> >> <th>Action</th>
> >> </tr>
> >> <tr class='mailrow' onclick='viewMsg(" .$id .",\"" .$subject ."\");' >
> >> <td>$subject</td>
> >> <td>$username</td>
> >> <td>$sentdate</td>
> >> <td valign='middle' align='center'>
> >> <img src='/images/icons/delete.png' width='16' height='16'
> >> onclick='deleteMsg(this, $id);'>
> >> <img src='/images/icons/reply.png' width='16' height='16'
> >> onclick='replyMsg(this, $id, \"{$subject}\" );'>
> >> <img src='/images/icons/forward.png' width='16' height='16'
> >> onclick='forwardMsg(this, $id, \"{$subject}\" );'>
> >> </td>
> >> </tr>
> >> </table>
> >>
> >> In the onComplete: I am calling this code to try and cause the rows to
> >> highlight during the mouseover... I'm getting nothing. My first
> thought is
> >> that the table hasn't been rendered when onComplete is called but then,
> >> onComplete should be called after all other work is done. What's the
> >> solution to this?
> >>
> >> Prototype:
> >> $$('tr.mailrow').each(function(item) {
> >> item.observe('mouseover', function() {
> >> item.setStyle({ backgroundColor: '#303030' });
> >> });
> >> item.observe('mouseout', function() {
> >> item.setStyle({backgroundColor: '#fff' });
> >> });
> >> });
> >>
> >> CSS:
> >> .mailrow tr:hover { color: #303030; }
> >>
> >>
> >>
> >> --
> >> You received this message because you are subscribed to the Google
> Groups
> >> "Prototype & script.aculo.us" group.
> >> To post to this group, send email to
> >> [email protected].
> >> To unsubscribe from this group, send email to
> >> [email protected].
> >> For more options, visit this group at
> >> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> >
> > --
> > You received this message because you are subscribed to the Google
> Groups "Prototype & script.aculo.us" group.
> > To post to this group, send email to
> [email protected].
> > To unsubscribe from this group, send email to
> [email protected].
> > For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> >
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
