Re: [Proto-Scripty] Major frustrations with Effect.Morph

[Alex McAuley]

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" <patric...@gmail.com>
To: "Prototype & script.aculo.us" <prototype-s...@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
> >
>

[david]

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

[david]

Sorry Alex, did not see next thread with the same name, it seems to be
the following of it.

--
david

[JoJo]

You might want to try setting paddingLeft, paddingRight, paddingTop,
paddingBottom all to 50px. I recall I ran into the same issue before
and this solved it.

On Oct 11, 12:41 am, "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

[patrick]

Because I posted this topic twice by mistake, it seems this is a
confusing thread. I replied to the other, but no one answered-- and
people are replying to this one, so I am going to repost my last reply
from the other thread.

>Patrick double posted and i replied to the
>second post - perhaps thats in a different group ?

Sorry about that-- I clicked on my post to view it after I submitted
it, and I got a message saying my post had been removed-- so I posted
it a 2nd time, and then the 1st one was there after all.. So I deleted
it..

Anyway, after many hours of trying to figure this thing out, I finally
figured out what the deal is. Apparently, for whatever reason, there
are many css attributes that are simply not accessible by getStyle.

I will prove this with the firebug console.

In my html document, I have:

<p id="test">hello</p>
<p id="test2">hello again</p>

... in my external css file, I have:

#test {
padding: 25px;

}

#test2 {
padding: 25px;
display: inline;

}

In firebug:

>>> $('test')
<p id="test">
>>> $('test2')

<p id="test2">

.. ok, so both test and test2 are there..

>>> $('test').getStyle('padding')

""

>>> $('test2').getStyle('display')

"inline"

... so it can read the display, but not padding (for whatever
reason).

>>> $('test2').getStyle('padding')
""
>>> new Effect.Morph($('test2'), {style: {'padding': '100px'}});

Object element=p#test2 style=Object options=Object
>>> $('test2').getStyle('padding')

"100px 100px 100px 100px"

... And that is why I would have to initiate the morph call several
times before the changes would actually take effect. So I found that
if I put in my dom:loaded observer setStyle{'padding': '50px'} -- then
it works because it can see the padding. But I do not understand why
it can't see it to begin with... sooo frustrating and I wasted so many
hours on something that seems so dumb.

... And then there are other attributes that morph just will not
change at all, no matter what...

>>> $('test2').getStyle('display')
"inline"
>>> new Effect.Morph(('test2'), {style: {'display': 'block'}});

Object element=p#test2 style=Object options=Object
>>> $('test2').getStyle('display')

"inline"

... ?!??!?!?!

So.. I have to manually do setStyle to change the display evidently.
nonsense!!!!

-patrick

[DJ Mangus]

I seem to remember that morph can only handle properties that can be
tweened. The solution in my experience is to morph between classes
where the non tweenable properies are applied at the end of the
effect. I haven't worked with morph for over a year so take that with
a grain of salt.

Sent from my phone so pardon the spelling errors.