Rails spinoffs - Jul 2005 - how to cancel/stop a script.aculo.us effect

I apologise for what is probably a totally noob question here, but I''m
at a
loss after pouring over the docs and the source code for prototype and
scriptaculous...

After you''ve started an effect, how do you access it to cancel or
change it?

I had assumed it was something like this:

myEffect = new Effect.Appear(element, {duration:1.5});
myEffect.cancel();

... but that doesn''t work. Any tips or pointers on how to approach
this?

It would be hugely useful for a ex-Flash guy like me for each effect to have
methods along the lines of ''reset'',
''fastforward'', ''pause'' etc.


Thanks,
Bruce
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050712/650665d1/attachment.html

I apologise for what is probably a totally noob question here, but I''m
at a
loss after pouring over the docs and the source code for prototype and
scriptaculous...

After you''ve started an effect, how do you access it to cancel or
change it?

I had assumed it was something like this:

myEffect = new Effect.Appear(element, {duration:1.5});
myEffect.cancel();

... but that doesn''t work. Any tips or pointers on how to approach
this?

It would be hugely useful for a ex-Flash guy like me to have methods for
each effect along the lines of ''reset'',
''fastforward'', ''pause'' etc.


Thanks,
Bruce
-------------- next part --------------
An HTML attachment was scrubbed...
URL:
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050712/cf55de40/attachment.html

cancel() will only work for the core effects.

if you need this for the other effects, you''l need to copy the effect  
code for the specific effect and hack away... :)

 From http://script.aculo.us/visual-effects:
"All the combination effects are based on the four core effects, and  
are thought of as examples to allow you to write your own effects."

I can understand the need for this however, so this is something that  
will probably make it into a future release.

Thomas

Am 13.07.2005 um 02:07 schrieb Bruce Collier:
> I apologise for what is probably a totally noob question here, but  
> I''m at a loss after pouring over the docs and the source code for
> prototype and scriptaculous...
>
> After you''ve started an effect, how do you access it to cancel or
> change it?
>
> I had assumed it was something like this:
>
> myEffect = new Effect.Appear(element, {duration:1.5});
> myEffect.cancel();
>
> ... but that doesn''t work. Any tips or pointers on how to approach
> this?
>
> It would be hugely useful for a ex-Flash guy like me to have  
> methods for each effect along the lines of ''reset'',
''fastforward'',
> ''pause'' etc.
>
>
> Thanks,
> Bruce
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

Please use "reply to all" on this list :)

Anyway, copy the effect code means literally, copy the javascript  
function, give it a new name and "hack it" to your liking. Of course,
you should have some javascript-foo, but it''s not too difficult :)

The current SVN trunk version includes .cancel() on all effects btw.

Thomas

Am 20.07.2005 um 07:42 schrieb Tench:
> I''m also interested in cancelling effects...  I use highlight  
> effect several times on the page (to highlight certain phrases on  
> mouseover).  If you go over two phrases which have  
> Effect.Highlight, then go back with the mouse to the first one  
> (while the effect is still taking place), one of those two phrases  
> (and sometimes both, depending on how shaky your hand is while  
> dragging the mouse) will get stuck with a background color that  
> simply won''t go away.  Which is a real bummer. I wanted highlights
> as an unobtrusive indicator of linked phrases...
>
> So I''d like to chip in my vote for engine-wide cancel effect.
>
> In the meantime, if anybody could provide any example of what  
> Thomas is referring to as "copy the effect code for the specific  
> effect and hack away" to cancel complex effects, I''d be most
grateful.
>
> All best,
> Tench
>
>
> On 19. ??? 2005., at 15:11, Thomas Fuchs wrote:
>
>
>> cancel() will only work for the core effects.
>>
>> if you need this for the other effects, you''l need to copy the
>> effect code for the specific effect and hack away... :)
>>
>>
>> Am 13.07.2005 um 02:07 schrieb Bruce Collier:
>>
>>
>>>
>>> After you''ve started an effect, how do you access it to
cancel or
>>> change it?
>>>
>>> I had assumed it was something like this:
>>>
>>> myEffect = new Effect.Appear(element, {duration:1.5});
>>> myEffect.cancel();
>>>
>>> ... but that doesn''t work. Any tips or pointers on how to
>>> approach this?
>>>
>>
>>
>
>

Thanks, Thomas!

Sorry to be such a tool, but I''m still having problems with cancel()  
in 1.1 beta. It does work when I place it immediately after creating  
a new effect, but I''m trying to have it cancel the previous effect if  
it exists.

I am also using css-style driven behaviors.  The whole thing looks  
like this:

var phrasehigh = null;

var myrules = {

  ''.phrase'' : function(element) {
         element.onmouseover = function() {
         elementid = element.id;

         if (phrasehigh) {
         phrasehigh.cancel();
         }

         phrasehigh = new Effect.Highlight(elementid, {duration:  
2.0,  startcolor: ''#ffa000''});

         }
     }
};

I swear to God, this doesn''t work. Cancel does not seem to have any  
effect in a situation like this. If anybody sees what I''m doing  
wrong, please let me know.

Using highlight with on mouseover is quirky: if you quickly go from  
one highlightable item to another and back, one or both of them will  
get stuck with the color that doesn''t fade away.  Which really ruins  
the whole idea of unobtrusive highlighting...

All best,
Tench


On 20. ??? 2005., at 08:50, Thomas Fuchs wrote:
> The current SVN trunk version includes .cancel() on all effects btw.

.cancel() will _abort_ the effect, not render the last frame.

for this you need to call:

phrasehigh.cancel();                                        // abort
phrasehigh.render(1.0);                                   // render  
last frame
if(phrasehigh.finish) phrasehigh.finish();      // call Highlights  
finish handling

(note this is untested...) :)

Thomas

Am 20.07.2005 um 16:19 schrieb Tench:
> Thanks, Thomas!
>
> Sorry to be such a tool, but I''m still having problems with cancel
> () in 1.1 beta. It does work when I place it immediately after  
> creating a new effect, but I''m trying to have it cancel the  
> previous effect if it exists.
>
> I am also using css-style driven behaviors.  The whole thing looks  
> like this:
>
> var phrasehigh = null;
>
> var myrules = {
>
>  ''.phrase'' : function(element) {
>         element.onmouseover = function() {
>         elementid = element.id;
>
>         if (phrasehigh) {
>         phrasehigh.cancel();
>         }
>
>         phrasehigh = new Effect.Highlight(elementid, {duration:  
> 2.0,  startcolor: ''#ffa000''});
>
>         }
>     }
> };
>
> I swear to God, this doesn''t work. Cancel does not seem to have
any
> effect in a situation like this. If anybody sees what I''m doing  
> wrong, please let me know.
>
> Using highlight with on mouseover is quirky: if you quickly go from  
> one highlightable item to another and back, one or both of them  
> will get stuck with the color that doesn''t fade away.  Which
really
> ruins the whole idea of unobtrusive highlighting...
>
> All best,
> Tench
>
>
> On 20. ??? 2005., at 08:50, Thomas Fuchs wrote:
>
>
>> The current SVN trunk version includes .cancel() on all effects btw.
>>
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

It works!  Vielen dank, Thomas!!!
Tench

On 20. ??? 2005., at 16:25, Thomas Fuchs wrote:
> phrasehigh.cancel();                                        // abort
> phrasehigh.render(1.0);                                   // render  
> last frame
> if(phrasehigh.finish) phrasehigh.finish();      // call Highlights  
> finish handling

I''m also interested in cancelling effects...  I use highlight effect  
several times on the page (to highlight certain phrases on  
mouseover).  If you go over two phrases which have Effect.Highlight,  
then go back with the mouse to the first one (while the effect is  
still taking place), one of those two phrases (and sometimes both,  
depending on how shaky your hand is while dragging the mouse) will  
get stuck with a background color that simply won''t go away.  Which  
is a real bummer. I wanted highlights as an unobtrusive indicator of  
linked phrases...

So I''d like to chip in my vote for engine-wide cancel effect.

In the meantime, if anybody could provide any example of what Thomas  
is referring to as "copy the effect code for the specific effect and  
hack away" to cancel complex effects, I''d be most grateful.

All best,
Tench


On 19. ??? 2005., at 15:11, Thomas Fuchs wrote:

> cancel() will only work for the core effects.
>
> if you need this for the other effects, you''l need to copy the  
> effect code for the specific effect and hack away... :)
>
>
> Am 13.07.2005 um 02:07 schrieb Bruce Collier:
>
>
>>
>> After you''ve started an effect, how do you access it to cancel
or
>> change it?
>>
>> I had assumed it was something like this:
>>
>> myEffect = new Effect.Appear(element, {duration:1.5});
>> myEffect.cancel();
>>
>> ... but that doesn''t work. Any tips or pointers on how to
approach
>> this?
>>
>
>

Tench wrote:
> I''m also interested in cancelling effects...  I use highlight
effect
> several times on the page (to highlight certain phrases on  
> mouseover).  If you go over two phrases which have Effect.Highlight,  
> then go back with the mouse to the first one (while the effect is  
> still taking place), one of those two phrases (and sometimes both,  
> depending on how shaky your hand is while dragging the mouse) will  
> get stuck with a background color that simply won''t go away. 
Which
> is a real bummer. I wanted highlights as an unobtrusive indicator of  
> linked phrases...
>
> So I''d like to chip in my vote for engine-wide cancel effect.
What would be more useful in situations like this is for the highlight 
(and others) effect to check if there''s already the same effect on the 
item and if so, cancel that automatically before starting a new one.

Should be fairly easy to have a lookup array containing the IDs of the 
elements currently undergoing the effect and to pop them out of it once 
the effect is complete.

I''d have a look at it myself but it''s 2am and I''m off
to bed!
If no-one has done anything like this by tomorrow, I''ll make some
demos.

-- 
R.Livsey
http://livsey.org

R.Livsey wrote on 07/20/2005 08:12:00 PM:
> What would be more useful in situations like this is for the highlight
> (and others) effect to check if there''s already the same effect on
the
> item and if so, cancel that automatically before starting a new one.
This cancel thread coincides with a potential timing issue I''m having
as
well. I''m using the fade/appear Effects in a timed, repeating
combination
(essentially to ''slide show'' some elements). I just realized
when I have
two of those patterns running on the same page, they conflict with each
other and cause timing and other problems with the scripts (timing is off,
elements don''t get hidden or appear). Was the script.aculo.us Effect
library written with the assumption that the same Effects probably
wouldn''t
be called at the same time on different elements in the DOM?

I''d like to have Effects continue on separately without having to
cancel
out other Effects, but I''m getting the impression that the library
can''t
handle that currently or isn''t set up that way. Is that the case or are
the
timing conflicts probably more on my side?

Jess

They weren''t written with any assumptions on this, it leaves that to  
the user. :)

If you create two Effects on the same element at the same time, they  
will both be executed and change the CSS properties of the element;  
so they''ll probably clash. They don''t know about each other.

One of the next releases will probably include a queuing mechanism  
and an auto-cancel feature--if i find the time :)

Thomas

Am 21.07.2005 um 16:41 schrieb JCollicott@msiinet.com:
> Was the script.aculo.us Effect library written with the assumption  
> that the same Effects probably wouldn''t
> be called at the same time on different elements in the DOM?

Thomas wrote on 07/21/2005 09:48:31 AM:
> They weren''t written with any assumptions on this, it leaves that
to
> the user. :)
>
> If you create two Effects on the same element at the same time, they
> will both be executed and change the CSS properties of the element;
> so they''ll probably clash. They don''t know about each
other.
>
> One of the next releases will probably include a queuing mechanism
> and an auto-cancel feature--if i find the time :)
Awesome - on both the lack of assumptions and the queueing mechanism. ;)

I''m running into the timing issues on completely different sets of
elements
within the same page, using totally different timers to initiate the
Effects. I''ll have to go back and give my script a closer look, and
maybe
post an example if the cause still escapes me..

Thanks for the (lighting speed) reply,

Jess