Hi, i''ve got a problem with highlighting table rows that change their color when user hovers mouse over them - when user clicks some buttons in the row, it is highlighted and then it goes back to the color specified in tr:hover, not to it''s original color. The additional problem with it is that rows are colored alternatively - I''ve got 2 separate classes for even/odd rows. While I understand why it happens, is there some easy way to avoid/fix it? Is there a way to get specific css property (in this case background color) from specified css class? Then I could check if the highlighted row is even or odd, get the background color value for respective css class and set it as a final color value for the highlight effect. I could hardcode color values into javascript, but if I change css style, I''d have to modify my javascript code as well. Or maybe it''s possible to find an element that has the same class as the highlighted element, but does not have hover effect turned on currenty? Is it possible? Thank you in advance --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You can do this my using
$(''mydiv'').addClassName(''something'') on the
mouseover, and
(''mydiv'').removeClassName(''something'') on
the mouseout.
Then you just make a few CSS entries for the alternate styles.
When I do this I typically make the CSS something like:
.row0 {
background-color:#c0c0c0;
}
.row1 {
background-color:#e0e0e0;
}
.row0highlight{
font-weight:bold;
}
.row1highlight{
font-weight:bold;
so you''d do :
onmouseover="$(''mydiv'').addClassName(''row0highlight'')"
onmouseoout="$(''mydiv'').removeClassName(''row0highlight'')"
}
On Jul 5, 1:58 pm, szimek <szi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hi,
>
> i''ve got a problem with highlighting table rows that change their
> color when user hovers mouse over them - when user clicks some buttons
> in the row, it is highlighted and then it goes back to the color
> specified in tr:hover, not to it''s original color. The additional
> problem with it is that rows are colored alternatively - I''ve got
2
> separate classes for even/odd rows.
>
> While I understand why it happens, is there some easy way to avoid/fix
> it?
>
> Is there a way to get specific css property (in this case background
> color) from specified css class? Then I could check if the highlighted
> row is even or odd, get the background color value for respective css
> class and set it as a final color value for the highlight effect. I
> could hardcode color values into javascript, but if I change css
> style, I''d have to modify my javascript code as well.
>
> Or maybe it''s possible to find an element that has the same class
as
> the highlighted element, but does not have hover effect turned on
> currenty? Is it possible?
>
> Thank you in advance
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Diodeus wrote:> .row0 { > background-color:#c0c0c0; > } > .row1 { > background-color:#e0e0e0; > } > .row0highlight{ > font-weight:bold; > } > .row1highlight{ > font-weight:bold; > > so you''d do : > > onmouseover="$(''mydiv'').addClassName(''row0highlight'')" > onmouseoout="$(''mydiv'').removeClassName(''row0highlight'')" > }Or even better... .even { background-color:#c0c0c0 } .odd { background-color:#e0e0e0 } .highlight { font-weight:bold } And then : onmouseover="$(''mydiv'').addClassName(''highlight'')" onmouseoout="$(''mydiv'').removeClassName(''highlight'')" No need to have a classnames like .row0highlight when elements can have multiple class names. -- Michael Peters Developer Plus Three, LP --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
You''ll notice the suggestions here all focus on applying the hover with js rather than CSS. From your initial post, you suggested you are using tr:hover. IIRC, this won''t work in IE6, which only respects :hover for <a> elements. Part of what you''re seeing is, as you seem to recognize, the Highlight effect setting the bg color at the element, which would override any CSS classes that might otherwise have effect. You may find it helpful to use the ''afterFinish'' callback to remove style settings at the element level to allow the CSS class settings to properly cascade. http://wiki.script.aculo.us/scriptaculous/show/CoreEffects TAG On Jul 5, 2007, at 11:58 AM, szimek wrote:> > Hi, > > i''ve got a problem with highlighting table rows that change their > color when user hovers mouse over them - when user clicks some buttons > in the row, it is highlighted and then it goes back to the color > specified in tr:hover, not to it''s original color. The additional > problem with it is that rows are colored alternatively - I''ve got 2 > separate classes for even/odd rows. > > While I understand why it happens, is there some easy way to avoid/fix > it? > > Is there a way to get specific css property (in this case background > color) from specified css class? Then I could check if the highlighted > row is even or odd, get the background color value for respective css > class and set it as a final color value for the highlight effect. I > could hardcode color values into javascript, but if I change css > style, I''d have to modify my javascript code as well. > > Or maybe it''s possible to find an element that has the same class as > the highlighted element, but does not have hover effect turned on > currenty? Is it possible? > > Thank you in advance > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks! Yeah, I''m using tr:hover, but you''re right - it doesn''t work in IE6 (without some additional effort). So I''ll probably go with js approach, however it adds lots of code to generated html page. Out of curiosity - I guess I have an idea how to use afterFinish callback, but how to "remove style settings at the element level to allow the CSS class settings to properly cascade."? I mean which function to use (and how)? I can see functions to get/set style, but how to remove? On 5 Lip, 22:07, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote:> You''ll notice the suggestions here all focus on applying the hover > with js rather than CSS. From your initial post, you suggested you > are using tr:hover. IIRC, this won''t work in IE6, which only > respects :hover for <a> elements. > > Part of what you''re seeing is, as you seem to recognize, the > Highlight effect setting the bg color at the element, which would > override any CSS classes that might otherwise have effect. You may > find it helpful to use the ''afterFinish'' callback to remove style > settings at the element level to allow the CSS class settings to > properly cascade.http://wiki.script.aculo.us/scriptaculous/show/CoreEffects > > TAG > > On Jul 5, 2007, at 11:58 AM, szimek wrote: > > > > > Hi, > > > i''ve got a problem with highlighting table rows that change their > > color when user hovers mouse over them - when user clicks some buttons > > in the row, it is highlighted and then it goes back to the color > > specified in tr:hover, not to it''s original color. The additional > > problem with it is that rows are colored alternatively - I''ve got 2 > > separate classes for even/odd rows. > > > While I understand why it happens, is there some easy way to avoid/fix > > it? > > > Is there a way to get specific css property (in this case background > > color) from specified css class? Then I could check if the highlighted > > row is even or odd, get the background color value for respective css > > class and set it as a final color value for the highlight effect. I > > could hardcode color values into javascript, but if I change css > > style, I''d have to modify my javascript code as well. > > > Or maybe it''s possible to find an element that has the same class as > > the highlighted element, but does not have hover effect turned on > > currenty? Is it possible? > > > Thank you in advance--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
element.style.backgroundColor = ''''; //should allow
class-specific
styles to properly cascade
Put the statement in your afterFinish callback--your options hash
might include the following:
{
afterFinish: function (o) {
o.element.style.backgroundColor = '''';
}
}
TAG
On Jul 5, 2007, at 3:41 PM, szimek wrote:
>
> Thanks!
>
> Yeah, I''m using tr:hover, but you''re right - it
doesn''t work in IE6
> (without some additional effort).
> So I''ll probably go with js approach, however it adds lots of code
to
> generated html page.
>
> Out of curiosity - I guess I have an idea how to use afterFinish
> callback, but how to "remove style settings at the element level to
> allow the CSS class settings to properly cascade."? I mean which
> function to use (and how)? I can see functions to get/set style, but
> how to remove?
>
>
> On 5 Lip, 22:07, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:
>> You''ll notice the suggestions here all focus on applying the
hover
>> with js rather than CSS. From your initial post, you suggested you
>> are using tr:hover. IIRC, this won''t work in IE6, which only
>> respects :hover for <a> elements.
>>
>> Part of what you''re seeing is, as you seem to recognize, the
>> Highlight effect setting the bg color at the element, which would
>> override any CSS classes that might otherwise have effect. You may
>> find it helpful to use the ''afterFinish'' callback to
remove style
>> settings at the element level to allow the CSS class settings to
>> properly cascade.http://wiki.script.aculo.us/scriptaculous/show/
>> CoreEffects
>>
>> TAG
>>
>> On Jul 5, 2007, at 11:58 AM, szimek wrote:
>>
>>
>>
>>> Hi,
>>
>>> i''ve got a problem with highlighting table rows that
change their
>>> color when user hovers mouse over them - when user clicks some
>>> buttons
>>> in the row, it is highlighted and then it goes back to the color
>>> specified in tr:hover, not to it''s original color. The
additional
>>> problem with it is that rows are colored alternatively -
I''ve got 2
>>> separate classes for even/odd rows.
>>
>>> While I understand why it happens, is there some easy way to
>>> avoid/fix
>>> it?
>>
>>> Is there a way to get specific css property (in this case
background
>>> color) from specified css class? Then I could check if the
>>> highlighted
>>> row is even or odd, get the background color value for respective
>>> css
>>> class and set it as a final color value for the highlight effect. I
>>> could hardcode color values into javascript, but if I change css
>>> style, I''d have to modify my javascript code as well.
>>
>>> Or maybe it''s possible to find an element that has the
same class as
>>> the highlighted element, but does not have hover effect turned on
>>> currenty? Is it possible?
>>
>>> Thank you in advance
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---