from reading the docs Effect.morph excpects a style string using camelised
case
I am not sure that css.padding="50px"; will work as it expects a string for
example
{style: 'padding:50px; margin:10px;', duration: 2.0}
HTH
Alex Mcauley
http://www.thevacancymarket.com
----- Original Message -----
From: "patrick" <patrick99...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com>
Sent: Sunday, October 11, 2009 4:05 AM
Subject: [Proto-Scripty] Major frustrations with Effect.Morph
>
> 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";
> }
>
> children.each(function(e){
> 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
> happens.
>
> 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
> again...
>
> ... 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:
>
> children.each(function(e){
> new Effect.Morph(e, {style: css, duration: .5});
> });
>
> to:
>
>
> children.invoke('setStyle', css);
>
> then all of my changes are exactly as they should be-- but I really
> wanted to have some animation.
>
> -patrick
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
