Re: [Proto-Scripty] highlighting a tablerow
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
thAction/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 wa...@wdstudio.comwrote:
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.
--
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
On Jan 3, 2013, at 8:59 AM, Phil Petree wrote:
$('mail').on('mouseover', 'tr', function(elm, evt){
My error, the variables are swapped. Make that line this:
$('mail').on('mouseover', 'tr', function(evt, elm){
Walter
--
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
Thanks Walter! I tried quite a few things... borrowed 1/2 dozen snippets
from various places and nothing was working till yours.
I still have one question, how do you undo (stopObserving) these events?
When I load new tables into the other tabs via ajax they are not being
monitored which means I need to do a stopEvent and restart with the new
rows.
BTW, I had to add a mouseout because when I take the mouse off the table it
left a row still highlighted.
It now looks like this:
var rows = $$('#mail tr');
$('mail').on('mouseover', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
elm.addClassName('over');
});
$('mail').on('mouseout', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
});
On Thu, Jan 3, 2013 at 11:25 AM, Walter Lee Davis wa...@wdstudio.comwrote:
On Jan 3, 2013, at 8:59 AM, Phil Petree wrote:
$('mail').on('mouseover', 'tr', function(elm, evt){
My error, the variables are swapped. Make that line this:
$('mail').on('mouseover', 'tr', function(evt, elm){
Walter
--
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
On Jan 3, 2013, at 1:41 PM, Phil Petree wrote:
Thanks Walter! I tried quite a few things... borrowed 1/2 dozen snippets
from various places and nothing was working till yours.
I still have one question, how do you undo (stopObserving) these events?
When I load new tables into the other tabs via ajax they are not being
monitored which means I need to do a stopEvent and restart with the new rows.
No, you just have to observe from higher up. If you use
document.on('mouseover'... it will work no matter when or where you insert the
elements:
http://scripty.walterdavisstudio.com/table-hover.html
I'm not using an Ajax call here to create my new tables, but I am generating a
completely new object after the page load, and that object has no observers
defined on it. There's just a single observer at the document level, and it
listens to all mouseover and mouseout events but only acts when they happen
over a tr.
Walter
BTW, I had to add a mouseout because when I take the mouse off the table it
left a row still highlighted.
It now looks like this:
var rows = $$('#mail tr');
$('mail').on('mouseover', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
elm.addClassName('over');
});
$('mail').on('mouseout', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
});
On Thu, Jan 3, 2013 at 11:25 AM, Walter Lee Davis wa...@wdstudio.com wrote:
On Jan 3, 2013, at 8:59 AM, Phil Petree wrote:
$('mail').on('mouseover', 'tr', function(elm, evt){
My error, the variables are swapped. Make that line this:
$('mail').on('mouseover', 'tr', function(evt, elm){
Walter
--
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.
Re: [Proto-Scripty] highlighting a tablerow
OK, I could do that but I wouldn't want it over every tr, only those within
the mail table. For instance if you were in an alternate tab viewing an
email, you wouldn't want a mouseover on the to, from, subject or message
rows. Likewise in the compose tab.
On Jan 3, 2013 2:27 PM, Walter Lee Davis wa...@wdstudio.com wrote:
On Jan 3, 2013, at 1:41 PM, Phil Petree wrote:
Thanks Walter! I tried quite a few things... borrowed 1/2 dozen
snippets from various places and nothing was working till yours.
I still have one question, how do you undo (stopObserving) these events?
When I load new tables into the other tabs via ajax they are not being
monitored which means I need to do a stopEvent and restart with the new
rows.
No, you just have to observe from higher up. If you use
document.on('mouseover'... it will work no matter when or where you insert
the elements:
http://scripty.walterdavisstudio.com/table-hover.html
I'm not using an Ajax call here to create my new tables, but I am
generating a completely new object after the page load, and that object has
no observers defined on it. There's just a single observer at the document
level, and it listens to all mouseover and mouseout events but only acts
when they happen over a tr.
Walter
BTW, I had to add a mouseout because when I take the mouse off the table
it left a row still highlighted.
It now looks like this:
var rows = $$('#mail tr');
$('mail').on('mouseover', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
elm.addClassName('over');
});
$('mail').on('mouseout', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
});
On Thu, Jan 3, 2013 at 11:25 AM, Walter Lee Davis wa...@wdstudio.com
wrote:
On Jan 3, 2013, at 8:59 AM, Phil Petree wrote:
$('mail').on('mouseover', 'tr', function(elm, evt){
My error, the variables are swapped. Make that line this:
$('mail').on('mouseover', 'tr', function(evt, elm){
Walter
--
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.
--
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
You were bang on about going up the heirarchy... instead of the top of the
dom, I went to the tabs div and then it was working fine.
I was able to just include the rows in mail...
mail system is 99% functional... will have to add in a contact list type
system but will do that later.
Thanks for all your help!
On Thu, Jan 3, 2013 at 4:56 PM, Walter Lee Davis wa...@wdstudio.com wrote:
You can be as specific as you want. If you need to highlight only the
tables that have a particular ancestor, you could make the selector
something like
document.on('mouseover', 'table.stripe tr', ...
and then you would only capture the tables that you had deliberately
marked as being stripe-able. Or use the ID of that tab to scope the
selection, or any other CSS tricks you can think of. It's a very flexible
approach.
Walter
On Jan 3, 2013, at 4:48 PM, Phil Petree wrote:
OK, I could do that but I wouldn't want it over every tr, only those
within the mail table. For instance if you were in an alternate tab
viewing an email, you wouldn't want a mouseover on the to, from, subject or
message rows. Likewise in the compose tab.
On Jan 3, 2013 2:27 PM, Walter Lee Davis wa...@wdstudio.com wrote:
On Jan 3, 2013, at 1:41 PM, Phil Petree wrote:
Thanks Walter! I tried quite a few things... borrowed 1/2 dozen
snippets from various places and nothing was working till yours.
I still have one question, how do you undo (stopObserving) these
events? When I load new tables into the other tabs via ajax they are not
being monitored which means I need to do a stopEvent and restart with the
new rows.
No, you just have to observe from higher up. If you use
document.on('mouseover'... it will work no matter when or where you insert
the elements:
http://scripty.walterdavisstudio.com/table-hover.html
I'm not using an Ajax call here to create my new tables, but I am
generating a completely new object after the page load, and that object has
no observers defined on it. There's just a single observer at the document
level, and it listens to all mouseover and mouseout events but only acts
when they happen over a tr.
Walter
BTW, I had to add a mouseout because when I take the mouse off the
table it left a row still highlighted.
It now looks like this:
var rows = $$('#mail tr');
$('mail').on('mouseover', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
elm.addClassName('over');
});
$('mail').on('mouseout', 'tr', function(evt, elm){
rows.invoke('removeClassName', 'over');
});
On Thu, Jan 3, 2013 at 11:25 AM, Walter Lee Davis wa...@wdstudio.com
wrote:
On Jan 3, 2013, at 8:59 AM, Phil Petree wrote:
$('mail').on('mouseover', 'tr', function(elm, evt){
My error, the variables are swapped. Make that line this:
$('mail').on('mouseover', 'tr', function(evt, elm){
Walter
--
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.
--
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
Re: [Proto-Scripty] highlighting a tablerow
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
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.
