Hi Alex, I'm sorry, I did not understand your problem. I use it with margin and it seems to work and define all margin with the specified length.
-- david On 11 oct, 09:41, "Alex McAuley" <webmas...@thecarmarketplace.com> wrote: > 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 Mcauleyhttp://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 -~----------~----~----~----~------~----~------~--~---