Pulse effect sometimes stopping on darkened version

[evilC]

I am using pulse effects in my app to highlight UI components on
mouseover of some help text. Sometimes, however, the animation gets
stuck or something and you are stuck with a greyed out DIV. Any ideas
on what I may be doing wrong or how I may work around it?

http://placebook.tv - hover the links in the instructions panel on the
left repeatedly.

cheers

[Walter Lee Davis]

I'd love to help, but your browser detection scheme mis-identified my
Safari as Chrome, then redirected me to getfirefox.com. I already have
Firefox, thanks.

Walter

> --
>
> 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-s...@googlegroups.com
> .
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
> .
>
>

[evilC]

Hmm.
'twas prototype that mis-identified, not me. It's a very simple
Prototype.browser.x check.
Whatever, I have changed it to a choice box now, so you dont have to
redirect.
Unfortunately, my site seems down at the moment, so I will have to
upload the new version.

On Dec 23, 12:26 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> I'd love to help, but your browser detection scheme mis-identified my  
> Safari as Chrome, then redirected me to getfirefox.com. I already have  
> Firefox, thanks.
>
> Walter
>
> On Dec 22, 2009, at 3:48 PM, evilC wrote:
>
> > I am using pulse effects in my app to highlight UI components on
> > mouseover of some help text. Sometimes, however, the animation gets
> > stuck or something and you are stuck with a greyed out DIV. Any ideas
> > on what I may be doing wrong or how I may work around it?
>

> >http://placebook.tv- hover the links in the instructions panel on the

[evilC]

OK, I have largely fixed browser compatibility. I was using a firefox
method to get the window size and it was breaking things for everyone
else.
I have now removed the browser check, so you should be able to access
the site.

Tthanks!

On Dec 23, 3:09 pm, evilC <ev...@evilc.com> wrote:
> Hmm.
> 'twas prototype that mis-identified, not me. It's a very simple
> Prototype.browser.x check.
> Whatever, I have changed it to a choice box now, so you dont have to
> redirect.
> Unfortunately, my site seems down at the moment, so I will have to
> upload the new version.
>
> On Dec 23, 12:26 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
>
> > I'd love to help, but your browser detection scheme mis-identified my  
> > Safari as Chrome, then redirected me to getfirefox.com. I already have  
> > Firefox, thanks.
>
> > Walter
>
> > On Dec 22, 2009, at 3:48 PM, evilC wrote:
>
> > > I am using pulse effects in my app to highlight UI components on
> > > mouseover of some help text. Sometimes, however, the animation gets
> > > stuck or something and you are stuck with a greyed out DIV. Any ideas
> > > on what I may be doing wrong or how I may work around it?
>

> > >http://placebook.tv-hover the links in the instructions panel on the

[Walter Lee Davis]

Can you make a cut-down example that shows only the trigger element
and the effect element? I tried looking at the source, and there's
just so much else going on in there that I don't know where to start.
Is that big lump of code in the middle (begins with unescape) what you
are using to drive any of these effects?

Walter

On Dec 22, 2009, at 3:48 PM, evilC wrote:

[evilC]

The app as a whole is complicated, but what is driving the effects
isnt.
It's simply html with a plain old link:

<a [...] onmouseover="attractAttention
('pb_user_mylocs_button');">link</a>

and the attractAttention function is a one-liner:

function attractAttention(obj){
new Effect.Pulsate(obj, { pulses: 3, duration: 1});
}

Apart from the "Click a Location Marker" link, which also moves the
map etc.

Basically, for a demo, rollover just the last link (My Locations)
repeatedly.
As I said, that effectively executes one line:
new Effect.Pulsate($('pb_user_mylocs_button'), { pulses: 3, duration:
1});

It's clearly not my code. If you go to http://wiki.github.com/madrobby/scriptaculous/effect-pulsate
and click the demo repeatedly, you get the same problem.

On Dec 23, 8:54 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> Can you make a cut-down example that shows only the trigger element  
> and the effect element? I tried looking at the source, and there's  
> just so much else going on in there that I don't know where to start.  
> Is that big lump of code in the middle (begins with unescape) what you  
> are using to drive any of these effects?
>
> Walter
>
> On Dec 22, 2009, at 3:48 PM, evilC wrote:
>
> > I am using pulse effects in my app to highlight UI components on
> > mouseover of some help text. Sometimes, however, the animation gets
> > stuck or something and you are stuck with a greyed out DIV. Any ideas
> > on what I may be doing wrong or how I may work around it?
>

> >http://placebook.tv- hover the links in the instructions panel on the

[evilC]

As an afterthought, I guess it is by design.
If you trigger it, it probably uses the current state as a starting
point. I guess what is needed is a way to tell it to stop the current
animation if triggered again before it finishes, or ignore subsequent
requests until the current animation is complete.

I tried queueing effects, but had no luck.

[Walter Lee Davis]

You might find it easier to set up queues if you don't use inline
code. Create an observer in the head of your page, and then you can
keep all your code in one place and integrate the effects so they are
aware of each other's existence and state.

document.observe('dom:loaded', function(){
Element.addMethods({
attractAttention: function(obj){
new Effect.Pulsate(obj, { pulses: 3, duration: 1, queue: this.id});
}
});
$('parentDiv').observe('mouseover',function(evt){
var elm = evt.element();
elm.identify(); //patch anything you didn't ID
switch(elm.id){
case 'foo':
$('foo_target').attractAttention();
break;
case 'bar':
$('bar_target').attractAttention();
break;
case 'baz':
$('baz_target').attractAttention();
break;
default:
break;
}
});
});

Hope this helps,

Walter

[evilC]

Thanks walter, though I am not sure I understand that code.
if the identify command assigns and ID, it returns it, but the code
throws it away then does a switch on the id on the next line.
It also appears that maybe I missed something about how queue works if
you are passing it the id of the element.
I will have to look into it, thanks muchly for your input.

[Walter Lee Davis]

Identify assigns an ID to the element if none exists, and that ID will
persist until the page is done processing. Basically, it's a throw-
away line to ensure that if the element that fired the event doesn't
have an ID, the rest of your code doesn't go sproing. You could just
as easily throw in an outer if(elm.id) test wrapped around the inner
parts.

Queue works by allowing you to define as many different queues as you
like, and for each queue, stacking up the effects that are fired
within it so that they have to complete before another effect can
begin. By passing the ID of the element as the queue name, you give
each element its own stack of effects, keeping another effect from
messing with it and giving each effect time to complete fully.

Walter

[evilC]

Thanks for that walter. I played around and it seemed that even if you
queue pulstes, you can run into issues. The solution I found in the
end is instead of queueing pulsates, queue an opacity effect of 0.1
duration, from 1 to 1. Queueing the pulsate is annoying anyway, as if
you spam the link, it queues and goes on for ages.

Cheers anyway