Hi all,
So, announcing the beta version of my new Effects V2 package for
Prototype:
What''s new in V2?
* All animation is now time-based, not frame based. So, if you tell
an effect to last exactly
one second, it will do so, regardless of the rendering speed of
the browser.
* Target frames-per-second option (will fall back to just not-so-many
fps on slower computers)
* Transition modifiers: In/Out-Easing, Wobbling, etc.
* Combining of several ''core'' effects with Effect.Parallel()
* Added .MoveBy() core effect
* Callbacks: beforeStart, beforeUpdate, afterUpdate, afterFinish
* More customization options with the core effects (namely .Scale)
* Partial effects (e.g. change an elements opactiy from 75% to 25%)
* Changed .Fade(), .Appear() and .Puff() to be ''Prepackaged
effects'',
and added
.Blind(), BlindDown(), .SwitchOff(), .DropOut(), .Shake() effects.
All these are thought of as examples you can tweak or use as
templates for your own
combinations of the core effects.
Examples of all this are on the demo page at
http://mir.aculo.us/demos/effects/effects2.html
For now, please see the source of the demo page for the JavaScript code.
You can use this code side-by-side with your current prototype.js.
A cleaned-up version will be available (presumably) by Sunday or Monday.
Glad to hear your comments!
--
Thomas
I love it! The callbacks are exactly what I needed - I was able to
create a Fade effect that would end by deleting the element from the
DOM. I don''t know if this is useful enough to add to the base .js, but
here it is if anyone is interested:
Effect2.FadeNDestroy = function(element) {
new Effect2.Fade(element, {afterFinish: function(effect)
{ Element.hide(effect.element);
$(element).parentNode.removeChild($(element)); }});
}
Thomas Fuchs wrote:
> Hi all,
>
> So, announcing the beta version of my new Effects V2 package for
> Prototype:
>
> What''s new in V2?
>
> * All animation is now time-based, not frame based. So, if you tell
> an effect to last exactly
> one second, it will do so, regardless of the rendering speed of
> the browser.
>
> * Target frames-per-second option (will fall back to just not-so-many
> fps on slower computers)
>
> * Transition modifiers: In/Out-Easing, Wobbling, etc.
>
> * Combining of several ''core'' effects with
Effect.Parallel()
>
> * Added .MoveBy() core effect
>
> * Callbacks: beforeStart, beforeUpdate, afterUpdate, afterFinish
>
> * More customization options with the core effects (namely .Scale)
>
> * Partial effects (e.g. change an elements opactiy from 75% to 25%)
>
> * Changed .Fade(), .Appear() and .Puff() to be ''Prepackaged
effects'',
> and added
> .Blind(), BlindDown(), .SwitchOff(), .DropOut(), .Shake() effects.
> All these are thought of as examples you can tweak or use as
> templates for your own
> combinations of the core effects.
>
> Examples of all this are on the demo page at
> http://mir.aculo.us/demos/effects/effects2.html
>
> For now, please see the source of the demo page for the JavaScript code.
> You can use this code side-by-side with your current prototype.js.
>
> A cleaned-up version will be available (presumably) by Sunday or Monday.
>
> Glad to hear your comments!
>
> --
> Thomas
> _______________________________________________
> Rails mailing list
> Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
Great work! One note: the puff effect causes my safari 2.0 browser to "quit unexpectedly" (have to click all 4 puff effect boxes to get it to happen). Javascript certainly shouldn''t be able to do that... but it does. Bad Safari. Duane Johnson (canadaduane) On May 27, 2005, at 5:47 PM, Thomas Fuchs wrote:> Hi all, > > So, announcing the beta version of my new Effects V2 package for > Prototype: > > What''s new in V2? > > * All animation is now time-based, not frame based. So, if you tell > an effect to last exactly > one second, it will do so, regardless of the rendering speed of > the browser. > > * Target frames-per-second option (will fall back to just not-so- > many fps on slower computers) > > * Transition modifiers: In/Out-Easing, Wobbling, etc. > > * Combining of several ''core'' effects with Effect.Parallel() > > * Added .MoveBy() core effect > > * Callbacks: beforeStart, beforeUpdate, afterUpdate, afterFinish > > * More customization options with the core effects (namely .Scale) > > * Partial effects (e.g. change an elements opactiy from 75% to 25%) > > * Changed .Fade(), .Appear() and .Puff() to be ''Prepackaged > effects'', and added > .Blind(), BlindDown(), .SwitchOff(), .DropOut(), .Shake() effects. > All these are thought of as examples you can tweak or use as > templates for your own > combinations of the core effects. > > Examples of all this are on the demo page at > http://mir.aculo.us/demos/effects/effects2.html > > For now, please see the source of the demo page for the JavaScript > code. > You can use this code side-by-side with your current prototype.js. > > A cleaned-up version will be available (presumably) by Sunday or > Monday. > > Glad to hear your comments! > > -- > Thomas > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
On Saturday 28 May 2005 17:21, Duane Johnson wrote:> One note: the puff effect causes my safari 2.0 browser to "quit > unexpectedly" (have to click all 4 puff effect boxes to get it to > happen). Javascript certainly shouldn''t be able to do that... but it > does. Bad Safari.My experience with Konqueror and Safari (only second-hand) has been that it apparently doesn''t take well lots of repeated calls to setTimeout. Where possible, e.g. for the time-based observers in Prototype, it seems to be a healthier solution to use setInterval instead. Michael -- Michael Schuerig Nothing is as brilliantly adaptive mailto:michael-q5aiKMLteq4b1SvskN2V4Q@public.gmane.org as selective stupidity. http://www.schuerig.de/michael/ --A.O. Rorty, The Deceptive Self
Thanks for the hint. I''ll have a look at that! Thomas Am 28.05.2005 um 19:04 schrieb Michael Schuerig:> On Saturday 28 May 2005 17:21, Duane Johnson wrote: > > >> One note: the puff effect causes my safari 2.0 browser to "quit >> unexpectedly" (have to click all 4 puff effect boxes to get it to >> happen). Javascript certainly shouldn''t be able to do that... but it >> does. Bad Safari. >> > > My experience with Konqueror and Safari (only second-hand) has been > that > it apparently doesn''t take well lots of repeated calls to setTimeout. > Where possible, e.g. for the time-based observers in Prototype, it > seems to be a healthier solution to use setInterval instead. > > Michael > > -- > Michael Schuerig Nothing is as brilliantly adaptive > mailto:michael-q5aiKMLteq4b1SvskN2V4Q@public.gmane.org as selective stupidity. > http://www.schuerig.de/michael/ --A.O. Rorty, The Deceptive Self > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
I just saw (in my own chapter in the beta book, hah) that there is a
Element.remove() function
which does just that, so
Effect2.FadeNDestroy = function(element) {
new Effect2.Fade(element, {afterFinish: function(effect)
{ Element.remove(effect.element); }} );
}
should do it :)
Thomas
Am 28.05.2005 um 02:16 schrieb David Teare:
> I love it! The callbacks are exactly what I needed - I was able to
> create a Fade effect that would end by deleting the element from
> the DOM. I don''t know if this is useful enough to add to the
> base .js, but here it is if anyone is interested:
>
> Effect2.FadeNDestroy = function(element) {
> new Effect2.Fade(element, {afterFinish: function(effect)
> { Element.hide(effect.element); $
> (element).parentNode.removeChild($(element)); }});
> }
Great job... this means I don''t have to hack Prototype anymore to make it do the things I need anymore! This things keeps getting better and better. =] On 5/28/05, Thomas Fuchs <thomas-9D208sng4xU@public.gmane.org> wrote:> > I just saw (in my own chapter in the beta book, hah) that there is a > Element.remove() function > which does just that, so > > Effect2.FadeNDestroy = function(element) { > new Effect2.Fade(element, {afterFinish: function(effect) > { Element.remove(effect.element); }} ); > } > > should do it :) > > Thomas > > Am 28.05.2005 um 02:16 schrieb David Teare: > > > I love it! The callbacks are exactly what I needed - I was able to > > create a Fade effect that would end by deleting the element from > > the DOM. I don''t know if this is useful enough to add to the > > base .js, but here it is if anyone is interested: > > > > Effect2.FadeNDestroy = function(element) { > > new Effect2.Fade(element, {afterFinish: function(effect) > > { Element.hide(effect.element); $ > > (element).parentNode.removeChild($(element)); }}); > > } > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
JUst went through all the demos. I love it. Just one suggestion and maybe this can go into the next version. On the Bling effects, would it be possible to have the contents of the container move up/down with the container as it is disappearing. Right now, it works perfectly as the name implies, because it really looks like blinds covering or uncovering the content. I guess what I''m talking about would be more like a SlideDown / SlideUp effect where the content hides / appears as it is sliding up / down. Sort of like a drop down menu that slides down / up. Ok, back to playing with the demos! =] On 5/29/05, Ramin <i8ramin-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Great job... this means I don''t have to hack Prototype anymore to make it > do the things I need anymore! This things keeps getting better and better. > =] > > On 5/28/05, Thomas Fuchs <thomas-9D208sng4xU@public.gmane.org> wrote: > > > > I just saw (in my own chapter in the beta book, hah) that there is a > > Element.remove() function > > which does just that, so > > > > Effect2.FadeNDestroy = function(element) { > > new Effect2.Fade(element, {afterFinish: function(effect) > > { Element.remove(effect.element); }} ); > > } > > > > should do it :) > > > > Thomas > > > > Am 28.05.2005 um 02:16 schrieb David Teare: > > > > > I love it! The callbacks are exactly what I needed - I was able to > > > create a Fade effect that would end by deleting the element from > > > the DOM. I don''t know if this is useful enough to add to the > > > base .js, but here it is if anyone is interested: > > > > > > Effect2.FadeNDestroy = function(element) { > > > new Effect2.Fade(element, {afterFinish: function(effect) > > > { Element.hide(effect.element); $ > > > (element).parentNode.removeChild($(element)); }}); > > > } > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > > > -- > - Ramin > http://www.getintothis.com/blog-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails
This is possible, but requires that you wrap your div that slides
down in another div (there is no other way to hide the overflow).
Here is a quick working example of this technique:
<div style=''width:600px;background:#aaa;''
onclick=''new
Effect2.SlideDown(this)''><div>(blah)</div></div>
Important: All the above must be on the same line, to prevent
whitespace creeping in. Instead of (blah) insert some lengthy text or
so.
Effect2.SlideDown = function(element) {
$(element).style.height = ''0px'';
$(element).style.overflow = ''hidden'';
$(element).childNodes[0].style.position = ''relative'';
Element.show(element);
new Effect2.Scale(element, 100,
{ scaleContent: false,
scaleX: false,
scaleMode: ''scroll'',
scaleFrom: 0,
duration: 0.8,
afterUpdate: function(effect)
{ effect.element.childNodes[0].style.bottom
(effect.originalHeight -
effect.element.clientHeight) + ''px''; }
}
);
}
If I get around to do it, I''ll provide cleaned-up SlideDown and
SlideUp effects which also adress the whitespace problem.
Tested in Safari 2 and Firefox, not tested in IE.
--
Thomas
Am 29.05.2005 um 16:45 schrieb Ramin:
> I guess what I''m talking about would be more like a SlideDown /
> SlideUp effect where the content hides / appears as it is sliding
> up / down. Sort of like a drop down menu that slides down / up.
So, I''ve added this to the demo page at http://mir.aculo.us/demos/ effects/effects2.html and included a SlideUp, too. Am 29.05.2005 um 18:17 schrieb Thomas Fuchs:> This is possible, but requires that you wrap your div that slides > down in another div (there is no other way to hide the overflow). > > Here is a quick working example of this technique: > > <div style=''width:600px;background:#aaa;'' onclick=''new > Effect2.SlideDown(this)''><div>(blah)</div></div> > > Important: All the above must be on the same line, to prevent > whitespace creeping in. Instead of (blah) insert some lengthy text > or so. > > Effect2.SlideDown = function(element) { > $(element).style.height = ''0px''; > $(element).style.overflow = ''hidden''; > $(element).childNodes[0].style.position = ''relative''; > Element.show(element); > new Effect2.Scale(element, 100, > { scaleContent: false, > scaleX: false, > scaleMode: ''scroll'', > scaleFrom: 0, > duration: 0.8, > afterUpdate: function(effect) > { effect.element.childNodes[0].style.bottom > (effect.originalHeight - > effect.element.clientHeight) + ''px''; } > } > ); > } > > If I get around to do it, I''ll provide cleaned-up SlideDown and > SlideUp effects which also adress the whitespace problem. > > Tested in Safari 2 and Firefox, not tested in IE. > > -- > > Thomas > > > Am 29.05.2005 um 16:45 schrieb Ramin: > > >> I guess what I''m talking about would be more like a SlideDown / >> SlideUp effect where the content hides / appears as it is sliding >> up / down. Sort of like a drop down menu that slides down / up. >> > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >
You are THE man. thanks! =] On 5/29/05, Thomas Fuchs <thomas-9D208sng4xU@public.gmane.org> wrote:> > So, I''ve added this to the demo page at http://mir.aculo.us/demos/ > effects/effects2.html and included a SlideUp, too. > > Am 29.05.2005 um 18:17 schrieb Thomas Fuchs: > > > This is possible, but requires that you wrap your div that slides > > down in another div (there is no other way to hide the overflow). > > > > Here is a quick working example of this technique: > > > > <div style=''width:600px;background:#aaa;'' onclick=''new > > Effect2.SlideDown(this)''><div>(blah)</div></div> > > > > Important: All the above must be on the same line, to prevent > > whitespace creeping in. Instead of (blah) insert some lengthy text > > or so. > > > > Effect2.SlideDown = function(element) { > > $(element).style.height = ''0px''; > > $(element).style.overflow = ''hidden''; > > $(element).childNodes[0].style.position = ''relative''; > > Element.show(element); > > new Effect2.Scale(element, 100, > > { scaleContent: false, > > scaleX: false, > > scaleMode: ''scroll'', > > scaleFrom: 0, > > duration: 0.8, > > afterUpdate: function(effect) > > { effect.element.childNodes[0].style.bottom > > (effect.originalHeight - > > effect.element.clientHeight) + ''px''; } > > } > > ); > > } > > > > If I get around to do it, I''ll provide cleaned-up SlideDown and > > SlideUp effects which also adress the whitespace problem. > > > > Tested in Safari 2 and Firefox, not tested in IE. > > > > -- > > > > Thomas > > > > > > Am 29.05.2005 um 16:45 schrieb Ramin: > > > > > >> I guess what I''m talking about would be more like a SlideDown / > >> SlideUp effect where the content hides / appears as it is sliding > >> up / down. Sort of like a drop down menu that slides down / up. > >> > > _______________________________________________ > > Rails mailing list > > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > > http://lists.rubyonrails.org/mailman/listinfo/rails > > > > _______________________________________________ > Rails mailing list > Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails >-- - Ramin http://www.getintothis.com/blog _______________________________________________ Rails mailing list Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails