Re: [Proto-Scripty] highlighting a tablerow

2013-01-01 Thread Dave Kibble
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 phil.pet...@gmail.com 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
 thSubject:/th
 thFrom:/th
 thSent:/th
 thAction/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
 prototype-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 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 prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.



Re: [Proto-Scripty] highlighting a tablerow

2013-01-01 Thread Walter Lee Davis
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 phil.pet...@gmail.com 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
thSubject:/th
thFrom:/th
thSent:/th
thAction/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
 prototype-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 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 prototype-scriptaculous@googlegroups.com.
 To unsubscribe from this group, send email to 
 prototype-scriptaculous+unsubscr...@googlegroups.com.
 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 prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.