>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

On Oct 11, 2:20 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
> > Patrick double posted and i replied to the
> > second post - perhaps thats in a different group ?
>
> Ah, that would explain it...  I guess one of the other mods removed
> the duplicate.
>
> -- T.J.
>
> On Oct 11, 9:59 am, "Alex McAuley" <webmas...@thecarmarketplace.com>
> wrote:
>
> > Thats really weird !!...
>
> > I clicked reply as normal - ... Patrick double posted and i replied to the
> > second post - perhaps thats in a different group ?
>
> > How bizzarre
>
> > Alex Mcauleyhttp://www.thevacancymarket.com
>
> > ----- Original Message -----
> > From: "T.J. Crowder" <t...@crowdersoftware.com>
> > To: "Prototype & script.aculo.us" <prototype-scriptaculous@googlegroups.com>
> > Sent: Sunday, October 11, 2009 9:56 AM
> > Subject: [Proto-Scripty] Re: major frustration with Effect.Morph
>
> > Hi,
>
> > FYI, Alex seems to have replied without using the reply button, and
> > with a slightly different subject.  His reply is 
> > here:http://groups.google.com/group/prototype-scriptaculous/browse_thread/...
>
> > -- T.J.
>
> > On Oct 11, 4:04 am, patrick <patrick99...@gmail.com> wrote:
> > > 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to