Ok, so I can't seem to win...  It appears to me that Effect.Morph is
full of bugs.

I have been trying my hardest to get morph to work with padding-- and
it doesn't behave properly...

document.observe('dom:loaded', function() {

      $$('input.sort_children').invoke('observe', 'click', function()
         var css = {};
         var children = this.next('div').immediateDescendants(); //
this selects an array of divs

// toggle the button state
         if (this.getValue().toLowerCase() == "sort") {
            this.value = "done";
            css.padding = "0px";
         else {
            this.value = "sort";
            css.padding = "50px";

            new Effect.Morph(e, {style: css, duration: .5});


when I click my sort button, I immediately see it change to "done" but
nothing happens..  I click it again.. it goes back to "sort".. nothing
happens.. I click it a 3rd time, and suddenly the padding morph

I then tried using css = 'classname1' and css = 'classname2'...  Then
when I clicked it, it would set the padding to 0 properly and morph
it... but when i'd click it a 2nd time, it would do something weird
that look like it set the padding to 5 and then it dropped down to 0

...  I also was trying to set the display properties from 'inline-
block' to 'block'.. and that did not work at all either when I was
using my css = {} hash/object...  When I tried using it with
classnames, similarly to padding, it only seemed to partially work.

Then I changed my css = {} hash/object to just deal with borders:

         if (this.getValue().toLowerCase() == "sort") {
            this.value = "done";
            css.border = "1px solid red";
         else {
            this.value = "sort";
            css.border = "5px dotted blue";

... this works fine.. so, it appears that Morph can't handle certain
css properties.

.. Oh and of course, if I change my:

            new Effect.Morph(e, {style: css, duration: .5});


children.invoke('setStyle', css);

then all of my changes are exactly as they should be-- but I really
wanted to have some animation.

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 
For more options, visit this group at 

Reply via email to