yeah your not using the initializer for the long hand morph right,
here is yours:
var h1 = $(document).getElement('h1'); var morph = new Fx.Morph(h1,
{unit : 'em'}); (function(){h1.morph('h1.loading')}).delay(1000);
This line should be changed - (function(){h1.morph
('h1.loading')}).delay(1000); - to this: (function(){ morph.start
('h1.loading') }).delay(1000);
Not sure if you are trying to morph a collection of header tags
either, that is not what morph is for, it does a single element.
On Jan 2, 9:36 am, Jacob <[email protected]> wrote:
> Ok, so I tried setting the {unit:'em'} option in the Morph
> consrtuctor, but it didnt seem to do anything.
>
> My JS code is:
>
> var h1 = $(document).getElement('h1');
> var morph = new Fx.Morph(h1, {unit: 'em'});
> (function(){h1.morph('h1.loading')}).delay(1000);
>
> And CSS looks like:
> h1 {font:normal 1.75em Tahoma, sans-serif; padding:10px 0; margin:0;
> background:url('../images/loading_h1.gif') no-repeat 0 50px;}
> h1.loading {background-position:0 10px; padding-left:32px; font-size:
> 1.75em;}
>
> In the end, I just realized I didnt need to include the font-size rule
> in .loading, but for posterity I would like to know if I was using
> theunitoption wrong?
>
> Thanks
> Jacob
>
> On Jan 2, 12:25 pm, Jacob <[email protected]> wrote:
>
> > Thanks for all the replies, I will investigate the "unit" option!
>
> > On Jan 1, 9:38 am, Michal <[email protected]> wrote:
>
> > > I think you might need to use the 'unit' option in the Fx.Morph
> > > constructorhttp://mootools.net/docs/Fx/Fx#Fx:constructor. I forget
> > > about this option all the time, and typically it takes me ages to
> > > remember to figure out why my Morphs are the wrong size!
>
> > > Michal.
>
> > > On Dec 31 2008, 6:50 pm, rpflo <[email protected]> wrote:
>
> > > > I just tested morphing to another css class and it doesn't seem to
> > > > work like I expect it to either, the css says em but it morphs to
> > > > pixels.
>
> > > > It does work, however, if you define it like I mentioned before.
>
> > > > On Dec 31, 11:44 am, rpflo <[email protected]> wrote:
>
> > > > > This works:
>
> > > > > $('dopeSauce').morph({font-size : '10em'});
>
> > > > > Haven't tested it with morphing to a css class, however.
>
> > > > > On Dec 31, 10:33 am, Jacob <[email protected]> wrote:
>
> > > > > > I have a morph instance that is using a classname, so it looks like
>
> > > > > > h1.morph('h1.loading')
>
> > > > > > and h1.loading has the rule {font-size:1.75em}
>
> > > > > > Mootools morphs this instead to {font-size:2px}. The same problem
> > > > > > but
> > > > > > inversed happens if I use a percentage for font size. If I used a
> > > > > > hard
> > > > > > pixel value {fonts-size:24px} it works just fine.
>
> > > > > > Does Mootools understand EMs and %s as relative measurements?
>
> > > > > > Thanks
> > > > > > J
