I think I solved the problem using effect queues, this is the new code:
function init() { var boxes = $('boxes'); boxes.select('.box').each( function (box) { var tooltip = box.down('.tooltip'); Event.observe(box, 'mouseenter', mouseEnter.bindAsEventListener (box, tooltip)); Event.observe(box, 'mouseleave', mouseLeave.bindAsEventListener (box, tooltip)); } ); function mouseEnter(event, tooltip) { if (!tooltip.visible()) { tooltip.setStyle({ top: (this.positionedOffset().top + this.getHeight() - 20) + 'px', left: (this.positionedOffset().left + parseInt(this.getWidth() / 2)) + 'px' }); tooltip.appear({ duration: 0.2, to: 0.8, queue: { position: 'end', scope: 'boxes-scope', limit: 1 }}); } } function mouseLeave(event, tooltip) { Effect.Queues.get('boxes-scope').invoke('cancel'); tooltip.hide(); } } document.observe('dom:loaded', function () { init(); }); Comments and suggestions are welcome! On Oct 30, 12:18 pm, Kupido <kup...@hotmail.com> wrote: > After some testing I noticed the problem only occurs when I use: > > tooltip.appear(); // scriptaculous effect > > instead of: > > tooltip.show(); > > Any suggestions? > > On Oct 30, 11:37 am, Kupido <kup...@hotmail.com> wrote: > > > Hi david, thank you for your reply. > > > The element argument in my previous post was a copy/paste error, > > here's a simplified working version of my code: > > > function init() > > { > > var boxes = $('boxes'); > > > boxes.select('.box').each( > > function (box) > > { > > Event.observe(box, 'mouseenter', > > mouseEnter.bindAsEventListener > > (box, box.down('.tooltip'))); > > Event.observe(box, 'mouseleave', > > mouseLeave.bindAsEventListener > > (boxes)); > > } > > ); > > > function mouseEnter(event, tooltip) > > { > > if (!tooltip.visible()) > > { > > tooltip.setStyle({ > > top: (this.positionedOffset().top + > > this.getHeight() + 10) + 'px', > > left: (this.positionedOffset().left) + 'px' > > }); > > tooltip.show(); > > } > > } > > > function mouseLeave(event) > > { > > this.select('.tooltip').invoke('hide'); > > } > > > } > > > document.observe('dom:loaded', function () { init(); }); > > > On Oct 30, 11:03 am, david <david.brill...@gmail.com> wrote: > > > > Hi Kupido, > > > > When writting: > > > Event.observe(element, 'mouseenter', mouseEnter.bindAsEventListener > > > (element)); > > > > When writting "bindAsEventListener", it means that your binded > > > function will have its scope set to element. > > > So your called fiunction should be: > > > function mouseEnter(event) > > > { > > > this.setStyle('color:blue'); //just an exemple of a call to an > > > element method. > > > > } > > > > In your writting, there is an element argument. If you use it, I'm not > > > sure it works. > > > > Btw, if you can post your whole code, it could help us. > > > > -- > > > david > > > > On 30 oct, 10:51, Kupido <kup...@hotmail.com> wrote: > > > > > Hi all, > > > > I have a page with some boxes placed side by side. When the user moves > > > > over one of them a tooltip appears, then it should disappear when the > > > > user moves out or moves over another box. > > > > > I use the mouseenter and mouseleave events to do this but sometimes, > > > > when the user moves quickly on the boxes, some tooltips don't hide. I > > > > can see even more than one tooltip at the same time and they won't > > > > disappear until the boxes are hovered again. It's like the mouseleave > > > > event is not triggered, but if I put an alert in it I see it gets > > > > triggered. > > > > > The code is the following: > > > > > $('boxes').select('.box').each( > > > > function (element) > > > > { > > > > Event.observe(element, 'mouseenter', > > > > mouseEnter.bindAsEventListener > > > > (element)); > > > > Event.observe(element, 'mouseleave', > > > > mouseLeave.bindAsEventListener > > > > (element)); > > > > } > > > > ); > > > > > function mouseEnter(event, element) > > > > { > > > > ... > > > > > } > > > > > function mouseLeave(event, element) > > > > { > > > > ... > > > > > } > > > > > What am I doing wrong? Any help would be appreciated, thanks in > > > > advance. --~--~---------~--~----~------------~-------~--~----~ 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-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---