Hi david,
I'll consider using fade instead of hide, thank you again for your
help!

On Oct 30, 1:02 pm, david <david.brill...@gmail.com> wrote:
> Hi Kupido,
>
> This is a good way to do this.
> Just a suggestion, if the tooltip appear, let it des-appear sloowly
> too.
> so don't just hide() it, but do an effect to do this :))
>
> --
> david
>
> On 30 oct, 12:58, Kupido <kup...@hotmail.com> wrote:
>
> > 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to