Hi Ken

On May 21, 6:27 pm, Ken Snyder <[EMAIL PROTECTED]> wrote:
> Interesting idea.  The thing is, you are thinking of a CSS class name as
> being a collection of styles.  But a CSS class name is just a string; a
> CSS selector is a collection of styles.  In order to find out what
> styles cascade to a certain element is quite complex (think firebug or
> Dean Edwards IE8.js).  To do what you're saying, you would have to find
> out what styles would cascade to the element if it had a certain CSS
> class name /and/ the CSS rules overrode inline properties.
>
> A shortcut way, I suppose, would be to remove all the inline styles,
> apply the CSS class name, look at the computed styles, then re-apply the
> inline styles that don't conflict.  Unfortunately that would probably
> produce a flicker.

Script.aculo.us is already doing something similar by creating an new
Element, adding a style, compute it, then destroy it
Here is the source : 
http://github.com/madrobby/scriptaculous/tree/master/src/effects.js#L1042

Doing the same with adding a class should work I guess.

> You can probably get your desired API by defining an object with a group
> of styles:
>
> var beginStyle = {
>   color: '#ff0000',
>   border: '2px solid red',
>   fontSize: '16px'};
>
> var endStyle = {
>   color: '#000000',
>   border: 'none',
>   fontSize: '12px'
>
> };
>
> $(element).setStyle(beginStyle).morph(endStyle);

That's a good use for sure, but defining it in CSS itself it's even
more fun ;-)

> > P.S. : As far as I know, such concept is already used by at least
> > jQuery and MooTools.
>
> Perhaps you mean those libraries have that functionality in plugins, but
> I'm skeptical that they use a CSS Rule parser in the core library.  I
> use jQuery and haven't seen such behavior.  Do you have a source?  What
> are their approaches and APIs?

Sure, jQuery FX use it in base.js for animateClass :
http://dev.jquery.com/browser/trunk/fx/fx.js#L68
In them case they actually just catch the offset between the actual
style and the new style defined by a class name.

For MooTools reference check them doc : 
http://docs12b.mootools.net/Fx/Fx.Morph#Fx-Morph:set
Them source site look down :-(

--
  Sebastien Grosjean - ZenCocoon
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype: Core" group.
To post to this group, send email to prototype-core@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-core?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to