Hi celso,
effectivelly, you have the removeClassName which remove the given
class for an element, but what you could also do is having another
class (say 'notchecked') that correspond to original style, and you
want to revert the 'checked' just do $('tr-xxx').morph('notchecked');
Depending to what you explain, I just want you to take care to one
thing, Scriptaculous when morph to a class name will update during
animation the inline style. But at the end of the animation, it will
add the class name to element class. So removing the className on an
element make it loose its properties.
--
david
On 4 juin, 22:25, Walter Lee Davis <wa...@wdstudio.com> wrote:
> Aha. Well, $('tr') returns one element that has the ID of 'tr', it
> does not return a collection of elements with that tag name.
>
> $$('tr') will return a collection of extended elements with the tag
> name TR. If you want to be more specific (maybe you use tables for
> something else on the same page, or do one day) then you can reference
> a parent element and use select to get the rows:
>
> $('tableID').select('tr')
>
> This has the added benefit of being slightly faster, since it doesn't
> look everywhere for table rows, just in that one table (or parent DIV
> or whatever).
>
> To apply the same action to multiple objects, Prototype has the
> Enumerable class, and the marvelous invoke method defined therein. So
> to set up the elements in your collection to listen for a click (and
> this is a weak design, look into event delegation for the right way to
> do it) you would do this:
>
> $('tableID').select('tr').invoke('observe','click','morph','checked');
>
> You can't use removeClassName to "undo" what Morph has wrought here. I
> believe that when you use a classname in Morph, it simply converts the
> properties of that particular CSS rule into the ending style hash and
> then calculates the intermediate values inside its effect loop.
>
> What will work is to use setStyle and a style hash with all the
> original values. So let's imagine that a normal tr looks like this:
> {backgroundColor:'#fff'} and tr.checked looks like {backgroundColor:
> '#ffc'} To set everything back to normal, do this:
>
> $('tableID').select('tr').invoke('setStyle',{backgroundColor:'#fff'});
>
> If you wanted to wrap both resetting and observing the click in a
> single function, you could simply invoke that:
>
> var clicky = function(elm){
> elm.setStyle({backgroundColor:'#fff'});
> elm.observe('click',function(evt){
> evt.element().morph('checked');
> });
>
> }
>
> $('tableID').select('tr').invoke(clicky);
>
> Walter
>
> On Jun 4, 2009, at 4:02 PM, Celso wrote:
>
> > My app uses "zebra" table. Each "tr" have a checkbox, when the
> > checkbox is checked, the morph effect is enabled
>
> > css:
> > .checked {font-weight: bold; background:#fb5126; color:#fff;}
>
> > zebra:
>
> > <tr id="tr-577" class="">
> > </tr>
> > <tr id="tr-587" class="fundo">
> > </tr>
> > <tr id="tr-592" class="">
>
> > with a checked:
>
> > <tr id="tr-577" class="">
> > </tr>
> > <tr id="tr-587" class="fundo checked">
> > </tr>
> > <tr id="tr-592" class="">
>
> > To ensure the original color of the zebra, i remove the "checked"
> > class
>
> > $('tr').morph('checked') function to add effect, but.. and the
> > remove???
>
> > I just know:
>
> > $('tr').removeClassName('checked');
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
