Rails spinoffs - May 2007 - Simulating onmouseleave and onmouseenter with Prototype

Hello.

I spent an hour or three chasing down a desired effect that mootools
implements, namely the simulation of onmouseleave and onmouseenter
events.

Why?

Lets say you have a Menu. A ul element that contains many li elements.
If you want to have a function (maybe an effect) fire when the mouse
moves outside of the ul, you are out of luck. Observe the mouseout
function like so:

Event.observe(nav, ''mouseout'', function(e) {
	// you would think this would work
	alert(''mouse is outside of nav?...'');
});

and what actually happens is that every time the mouse leaves the
element OR crosses the boundary of a child element (li), the event is
fired.

Instead of implementing onmouseleave/onmouseenter the way that
mootools has it, I saw that the sweet prototype API has a Pointer
class.

I''m still a bit green with Prototype, but my answer came in this
shape:

Event.observe(nav, ''mouseout'', function(e) {
	if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
		alert(''...mouse is now truly outside nav...'');
		});
	}
});

Have a good day!
Sudara


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Well done.  I hadn''t thought of that.  Thanks for sharing!
 - Dash -

Sudara wrote:
> Hello.
>
> I spent an hour or three chasing down a desired effect that mootools
> implements, namely the simulation of onmouseleave and onmouseenter
> events.
>
> Why?
>
> Lets say you have a Menu. A ul element that contains many li elements.
> If you want to have a function (maybe an effect) fire when the mouse
> moves outside of the ul, you are out of luck. Observe the mouseout
> function like so:
>
> Event.observe(nav, ''mouseout'', function(e) {
> 	// you would think this would work
> 	alert(''mouse is outside of nav?...'');
> });
>
> and what actually happens is that every time the mouse leaves the
> element OR crosses the boundary of a child element (li), the event is
> fired.
>
> Instead of implementing onmouseleave/onmouseenter the way that
> mootools has it, I saw that the sweet prototype API has a Pointer
> class.
>
> I''m still a bit green with Prototype, but my answer came in this
> shape:
>
> Event.observe(nav, ''mouseout'', function(e) {
> 	if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
> 		alert(''...mouse is now truly outside nav...'');
> 		});
> 	}
> });
>
> Have a good day!
> Sudara
>
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Interresting !

In fact I have developped a very complicated Contextual Menu, with
multiple <ul><li>.

Because of this strange behavior, on mouseout, I set a timeout before
closing the menu.

Then if the mouse movein quickly the menu stay opened like an OS Menu.

There is one issue with your solution, you might have to check if
mouse is on a submenu (sub UL/LI) ?


On 5/11/07, David Dashifen Kees
<dashifen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Well done.  I hadn''t thought of that.  Thanks for sharing!
>  - Dash -
>
> Sudara wrote:
> > Hello.
> >
> > I spent an hour or three chasing down a desired effect that mootools
> > implements, namely the simulation of onmouseleave and onmouseenter
> > events.
> >
> > Why?
> >
> > Lets say you have a Menu. A ul element that contains many li elements.
> > If you want to have a function (maybe an effect) fire when the mouse
> > moves outside of the ul, you are out of luck. Observe the mouseout
> > function like so:
> >
> > Event.observe(nav, ''mouseout'', function(e) {
> >       // you would think this would work
> >       alert(''mouse is outside of nav?...'');
> > });
> >
> > and what actually happens is that every time the mouse leaves the
> > element OR crosses the boundary of a child element (li), the event is
> > fired.
> >
> > Instead of implementing onmouseleave/onmouseenter the way that
> > mootools has it, I saw that the sweet prototype API has a Pointer
> > class.
> >
> > I''m still a bit green with Prototype, but my answer came in
this
> > shape:
> >
> > Event.observe(nav, ''mouseout'', function(e) {
> >       if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
> >               alert(''...mouse is now truly outside
nav...'');
> >               });
> >       }
> > });
> >
> > Have a good day!
> > Sudara
> >
> >
> > >
> >
> >
>
> >
>

-- 
Jean-Philippe Encausse - R&D Jalios SA
Jp [at] encausse.net - http://www.encausse.com - http://www.jalias.com
GTalk: jp.encausse [at] gmail.com - SMS: sms [at] jp.encausse.net
Mob: +33 6 82 12 56 99 Jalios: +33 1 39 23 92 83 Tel: +33 1 39 18 90 15
Do it Once, Use it Twice ~ Do it Twice, Make It Once

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Correct behavior.

You''re seeing it because of event bubbling.  PPK explains this  
nicely, as well as providing a short cross-browser solution similar  
to Prototype''s Event.element();
http://www.quirksmode.org/js/events_mouse.html

Checking mouse position like you''re trying to do is the hard way.  =)


TAG

On May 11, 2007, at 6:40 AM, Sudara wrote:
>
> Hello.
>
> I spent an hour or three chasing down a desired effect that mootools
> implements, namely the simulation of onmouseleave and onmouseenter
> events.
>
> Why?
>
> Lets say you have a Menu. A ul element that contains many li elements.
> If you want to have a function (maybe an effect) fire when the mouse
> moves outside of the ul, you are out of luck. Observe the mouseout
> function like so:
>
> Event.observe(nav, ''mouseout'', function(e) {
> 	// you would think this would work
> 	alert(''mouse is outside of nav?...'');
> });
>
> and what actually happens is that every time the mouse leaves the
> element OR crosses the boundary of a child element (li), the event is
> fired.
>
> Instead of implementing onmouseleave/onmouseenter the way that
> mootools has it, I saw that the sweet prototype API has a Pointer
> class.
>
> I''m still a bit green with Prototype, but my answer came in this
> shape:
>
> Event.observe(nav, ''mouseout'', function(e) {
> 	if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
> 		alert(''...mouse is now truly outside nav...'');
> 		});
> 	}
> });
>
> Have a good day!
> Sudara
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Actually, I tested what you suggested, a list with an inner-list (or 
submenu), to see if it would work.  Here''s the html:

<ul id="list">
    <li> 1
        <ul>
            <li>0</li>
        </ul>
    </li>
    <li> 2
        <ul>
            <li>0</li>
            <li>1</li>
        </ul>
    </li>
    <li> 3
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $("list").observe("mouseout",  function(e) {
        if(Position.within($("list"), Event.pointerX(e), 
Event.pointerY(e))) return;
       alert("list out");
    });
</script>

It worked flawlessly.  The alert box was only thrown when you leave the 
area of the ul#list, not when you leave any of the inner items or lists.

 - Dash -


Jean-Philippe Encausse wrote:
> Interresting !
>
> In fact I have developped a very complicated Contextual Menu, with
> multiple <ul><li>.
>
> Because of this strange behavior, on mouseout, I set a timeout before
> closing the menu.
>
> Then if the mouse movein quickly the menu stay opened like an OS Menu.
>
> There is one issue with your solution, you might have to check if
> mouse is on a submenu (sub UL/LI) ?
>
>
> On 5/11/07, David Dashifen Kees
<dashifen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>   
>> Well done.  I hadn''t thought of that.  Thanks for sharing!
>>  - Dash -
>>
>> Sudara wrote:
>>     
>>> Hello.
>>>
>>> I spent an hour or three chasing down a desired effect that
mootools
>>> implements, namely the simulation of onmouseleave and onmouseenter
>>> events.
>>>
>>> Why?
>>>
>>> Lets say you have a Menu. A ul element that contains many li
elements.
>>> If you want to have a function (maybe an effect) fire when the
mouse
>>> moves outside of the ul, you are out of luck. Observe the mouseout
>>> function like so:
>>>
>>> Event.observe(nav, ''mouseout'', function(e) {
>>>       // you would think this would work
>>>       alert(''mouse is outside of nav?...'');
>>> });
>>>
>>> and what actually happens is that every time the mouse leaves the
>>> element OR crosses the boundary of a child element (li), the event
is
>>> fired.
>>>
>>> Instead of implementing onmouseleave/onmouseenter the way that
>>> mootools has it, I saw that the sweet prototype API has a Pointer
>>> class.
>>>
>>> I''m still a bit green with Prototype, but my answer came
in this
>>> shape:
>>>
>>> Event.observe(nav, ''mouseout'', function(e) {
>>>      
if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
>>>               alert(''...mouse is now truly outside
nav...'');
>>>               });
>>>       }
>>> });
>>>
>>> Have a good day!
>>> Sudara
>>>
>>>
>>>       
>>>       
>
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

It may be the hard way, but I think it also requires less explanation.  
It''s relatively clear that, if you want to tell when the mouse leaves
an
element, you can exit a mouseout observer if the pointer is still within 
the element.  The method that you link to on quirksmode, while perhaps 
more efficient since it relies mostly on properties rather than 
functional calls and mathematics seems to be far more confusing.  I''d
go
with the pointer arithmetic, especially since the nitty-gritty math is 
hidden by the Position.within() function call.

 - Dash -

Tom Gregory wrote:
> Correct behavior.
>
> You''re seeing it because of event bubbling.  PPK explains this  
> nicely, as well as providing a short cross-browser solution similar  
> to Prototype''s Event.element();
> http://www.quirksmode.org/js/events_mouse.html
>
> Checking mouse position like you''re trying to do is the hard way. 
=)
>
>
> TAG
>
> On May 11, 2007, at 6:40 AM, Sudara wrote:
>
>   
>> Hello.
>>
>> I spent an hour or three chasing down a desired effect that mootools
>> implements, namely the simulation of onmouseleave and onmouseenter
>> events.
>>
>> Why?
>>
>> Lets say you have a Menu. A ul element that contains many li elements.
>> If you want to have a function (maybe an effect) fire when the mouse
>> moves outside of the ul, you are out of luck. Observe the mouseout
>> function like so:
>>
>> Event.observe(nav, ''mouseout'', function(e) {
>> 	// you would think this would work
>> 	alert(''mouse is outside of nav?...'');
>> });
>>
>> and what actually happens is that every time the mouse leaves the
>> element OR crosses the boundary of a child element (li), the event is
>> fired.
>>
>> Instead of implementing onmouseleave/onmouseenter the way that
>> mootools has it, I saw that the sweet prototype API has a Pointer
>> class.
>>
>> I''m still a bit green with Prototype, but my answer came in
this
>> shape:
>>
>> Event.observe(nav, ''mouseout'', function(e) {
>> 	if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
>> 		alert(''...mouse is now truly outside nav...'');
>> 		});
>> 	}
>> });
>>
>> Have a good day!
>> Sudara
>>
>>
>>     
>
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Anyone have any thoughts on adding a function like that to the
"simulated"
area of prototype as mouseenter/mouseleave events (such as the ones IE has
natively)? It''d be handy to have a cross-browser implementation of
those
events. I''m not sure what it would take to simulate events as opposed
to
properties or functions, but that would definitely be neat...

-Jerod

On 5/11/07, David Dashifen Kees
<dashifen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> It may be the hard way, but I think it also requires less explanation.
> It''s relatively clear that, if you want to tell when the mouse
leaves an
> element, you can exit a mouseout observer if the pointer is still within
> the element.  The method that you link to on quirksmode, while perhaps
> more efficient since it relies mostly on properties rather than
> functional calls and mathematics seems to be far more confusing. 
I''d go
> with the pointer arithmetic, especially since the nitty-gritty math is
> hidden by the Position.within() function call.
>
> - Dash -
>
> Tom Gregory wrote:
> > Correct behavior.
> >
> > You''re seeing it because of event bubbling.  PPK explains
this
> > nicely, as well as providing a short cross-browser solution similar
> > to Prototype''s Event.element();
> > http://www.quirksmode.org/js/events_mouse.html
> >
> > Checking mouse position like you''re trying to do is the hard
way.  =)
> >
> >
> > TAG
> >
> > On May 11, 2007, at 6:40 AM, Sudara wrote:
> >
> >
> >> Hello.
> >>
> >> I spent an hour or three chasing down a desired effect that
mootools
> >> implements, namely the simulation of onmouseleave and onmouseenter
> >> events.
> >>
> >> Why?
> >>
> >> Lets say you have a Menu. A ul element that contains many li
elements.
> >> If you want to have a function (maybe an effect) fire when the
mouse
> >> moves outside of the ul, you are out of luck. Observe the mouseout
> >> function like so:
> >>
> >> Event.observe(nav, ''mouseout'', function(e) {
> >>      // you would think this would work
> >>      alert(''mouse is outside of nav?...'');
> >> });
> >>
> >> and what actually happens is that every time the mouse leaves the
> >> element OR crosses the boundary of a child element (li), the event
is
> >> fired.
> >>
> >> Instead of implementing onmouseleave/onmouseenter the way that
> >> mootools has it, I saw that the sweet prototype API has a Pointer
> >> class.
> >>
> >> I''m still a bit green with Prototype, but my answer came
in this
> >> shape:
> >>
> >> Event.observe(nav, ''mouseout'', function(e) {
> >>     
if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
> >>              alert(''...mouse is now truly outside
nav...'');
> >>              });
> >>      }
> >> });
> >>
> >> Have a good day!
> >> Sudara
> >>
> >>
> >>
> >
> >
> > >
> >
> >
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jerod Venema wrote:
> Anyone have any thoughts on adding a function like that to the 
> "simulated" area of prototype as mouseenter/mouseleave events
(such as
> the ones IE has natively)? It''d be handy to have a cross-browser 
> implementation of those events. I''m not sure what it would take to
> simulate events as opposed to properties or functions, but that would 
> definitely be neat...
Let me preface my comments by offering a working example of a 
cross-browser mouseenter/mouseleave implementation using the 
aforementioned approach of event.relatedTarget by Peter-Paul Koch. see 
http://kendsnyder.com/sandbox/mouseenter.html

This is a very interesting topic.  It is truly counter-intuitive that 
mouseout events are fired when moving from the parent to the child 
element and likewise that mouseover events are fired when moving from 
the child to the parent.  I think many developers avoid this situation 
in various ways.

See the code to my working example below.  Note that it passes the 
element back to the observer function because IE doesn''t support 
event.currentTarget.

I think it is reasonable to request that onmouseenter and onmouseleave 
be implemented for non-IE browsers in Prototype.  This pair of DOM 
events is quite useful.  The trick, at least from what I can see, is 
that a mouseover/mouseout observer must be wrapped in a function.  Once 
the wrapping occurs, a cache is needed to provide the ability to detach 
a mouseenter/mouseleave observer.  My example lacks detachment 
functionality.

I''ll look into creating a patch that integrates with Prototype.

--Ken Snyder



Element.addMethods({
    onmouseenter: function(element,observer) {
        element = $(element);
       
element.observe(''mouseover'',function(evt,currentTarget) {
            var relatedTarget = $(evt.relatedTarget || evt.fromElement);
            if( relatedTarget!=currentTarget && 
relatedTarget.childOf(currentTarget)==false ) {
                observer();
            }
        }.bindAsEventListener({},element));
        return element;
    },
    onmouseleave: function(element,observer) {
        element = $(element);
        element.observe(''mouseout'',function(evt,currentTarget)
{
            var relatedTarget = $(evt.relatedTarget || evt.toElement);
            if( relatedTarget!=currentTarget && 
relatedTarget.childOf(currentTarget)==false ) {
                observer();
            }
        }.bindAsEventListener({},element));
        return element;
    }
});




--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Jerod Venema wrote:
> Anyone have any thoughts on adding a function like that to the 
> "simulated" area of prototype as mouseenter/mouseleave events
(such as
> the ones IE has natively)? It''d be handy to have a cross-browser 
> implementation of those events. I''m not sure what it would take to
> simulate events as opposed to properties or functions, but that would 
> definitely be neat...
>
> -Jerod
>
I''ve now submitted a patch (http://dev.rubyonrails.org/ticket/8354).  
We''ll see what the Core Prototype team says.

--Ken Snyder

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Wow, great work Ken, I''m all for it.

The mootools library contains this exact implementation. I also
translated it into prototype, but then I realized I could get my
desired behavior much more easily - with one if statement - this is
really why I love prototype. It has that same feel as Ruby - it works
for you. If something seems complicated, it''s not prototype,
it''s
you ;)

That being said, it would be nice not to reinvent the wheel and to
make this behavior easily accessible.

sudara

ps. It would be nice to see a prototype-only tips-and-tricks user
content site. I want to see all the pretty things that people are
making with it, best practices, etc. Any good places to visit?




On May 14, 5:57 am, Ken Snyder
<kendsny...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Jerod Venema wrote:
> > Anyone have any thoughts on adding a function like that to the
> > "simulated" area of prototype as mouseenter/mouseleave
events (such as
> > the ones IE has natively)? It''d be handy to have a
cross-browser
> > implementation of those events. I''m not sure what it would
take to
> > simulate events as opposed to properties or functions, but that would
> > definitely be neat...
>
> > -Jerod
>
> I''ve now submitted a patch
(http://dev.rubyonrails.org/ticket/8354).
> We''ll see what the Core Prototype team says.
>
> --Ken Snyder

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Very awesome.  Thanks for your efforts ;)

 - Dash -

Ken Snyder wrote:
> Jerod Venema wrote:
>   
>> Anyone have any thoughts on adding a function like that to the 
>> "simulated" area of prototype as mouseenter/mouseleave events
(such as
>> the ones IE has natively)? It''d be handy to have a
cross-browser
>> implementation of those events. I''m not sure what it would
take to
>> simulate events as opposed to properties or functions, but that would 
>> definitely be neat...
>>
>> -Jerod
>>
>>     
> I''ve now submitted a patch
(http://dev.rubyonrails.org/ticket/8354).
> We''ll see what the Core Prototype team says.
>
> --Ken Snyder
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hmm. I''ve just found this thread after coding my own way around this
problem, now I feel a bit daft having seen some of the approaches
here. I found that Position.within() returns false if you move over a
child element of the element you''re testing, so I looped over all
descendents of the parent, performing a within check on each and
storing a boolean flag (isWithin), which is checked and handled
accordingly once all within assessments are done. Probably very
expensive, but it seems to be working so far.

var isWithin = false;
function mouseHandler(evt) {

  mouseX = Event.pointerX(evt);
  mouseY = Event.pointerY(evt);

  if (Position.within($(''tab_menu''), mouseX, mouseY))
    isWithin = true;
  $(''tab_menu'').descendants().each(function(desc) {
    if (Position.within(desc, mouseX, mouseY))
      isWithin = true;
  });

  if (isWithin == false)
    alert("we''re not in kansas any more");

  isWithin = false;

}

Ben


On May 11, 7:33 pm, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Actually, I tested what you suggested, a list with an inner-list (or
> submenu), to see if it would work.  Here''s the html:
>
> <ul id="list">
>     <li> 1
>         <ul>
>             <li>0</li>
>         </ul>
>     </li>
>     <li> 2
>         <ul>
>             <li>0</li>
>             <li>1</li>
>         </ul>
>     </li>
>     <li> 3
>         <ul>
>             <li>0</li>
>             <li>1</li>
>             <li>2</li>
>         </ul>
>     </li>
> </ul>
>
> <script type="text/javascript">
>     $("list").observe("mouseout",  function(e) {
>         if(Position.within($("list"), Event.pointerX(e),
> Event.pointerY(e))) return;
>        alert("list out");
>     });
> </script>
>
> It worked flawlessly.  The alert box was only thrown when you leave the
> area of the ul#list, not when you leave any of the inner items or lists.
>
>  - Dash -
>
> Jean-Philippe Encausse wrote:
> > Interresting !
>
> > In fact I have developped a very complicated Contextual Menu, with
> > multiple <ul><li>.
>
> > Because of this strange behavior, on mouseout, I set a timeout before
> > closing the menu.
>
> > Then if the mouse movein quickly the menu stay opened like an OS Menu.
>
> > There is one issue with your solution, you might have to check if
> > mouse is on a submenu (sub UL/LI) ?
>
> > On 5/11/07, David Dashifen Kees
<dashi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> >> Well done.  I hadn''t thought of that.  Thanks for
sharing!
> >>  - Dash -
>
> >> Sudara wrote:
>
> >>> Hello.
>
> >>> I spent an hour or three chasing down a desired effect that
mootools
> >>> implements, namely the simulation of onmouseleave and
onmouseenter
> >>> events.
>
> >>> Why?
>
> >>> Lets say you have a Menu. A ul element that contains many li
elements.
> >>> If you want to have a function (maybe an effect) fire when the
mouse
> >>> moves outside of the ul, you are out of luck. Observe the
mouseout
> >>> function like so:
>
> >>> Event.observe(nav, ''mouseout'', function(e) {
> >>>       // you would think this would work
> >>>       alert(''mouse is outside of nav?...'');
> >>> });
>
> >>> and what actually happens is that every time the mouse leaves
the
> >>> element OR crosses the boundary of a child element (li), the
event is
> >>> fired.
>
> >>> Instead of implementing onmouseleave/onmouseenter the way that
> >>> mootools has it, I saw that the sweet prototype API has a
Pointer
> >>> class.
>
> >>> I''m still a bit green with Prototype, but my answer
came in this
> >>> shape:
>
> >>> Event.observe(nav, ''mouseout'', function(e) {
> >>>      
if(!Position.within(nav,Event.pointerX(e),Event.pointerY(e))){
> >>>               alert(''...mouse is now truly outside
nav...'');
> >>>               });
> >>>       }
> >>> });
>
> >>> Have a good day!
> >>> Sudara

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Nice one Ken :) Hope it makes it in the official release! (If not, I''ll
use
it anyway though!)

-Jerod

On 5/13/07, Ken Snyder
<kendsnyder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
>
> Jerod Venema wrote:
> > Anyone have any thoughts on adding a function like that to the
> > "simulated" area of prototype as mouseenter/mouseleave
events (such as
> > the ones IE has natively)? It''d be handy to have a
cross-browser
> > implementation of those events. I''m not sure what it would
take to
> > simulate events as opposed to properties or functions, but that would
> > definitely be neat...
> >
> > -Jerod
> >
> I''ve now submitted a patch
(http://dev.rubyonrails.org/ticket/8354).
> We''ll see what the Core Prototype team says.
>
> --Ken Snyder
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I love scriptaculous, and gzip it when I use it to about 10-15k.
However, for a menu mouseover solution, I use an accessible css
solution (yours sounds accessible too), that requires no library, just
css... actually, have been using this guys css menus for 2 years now,
cause they''re so darn good.
http://www.cssplay.co.uk/menus/tab_padding.html
And I used this for a client at http://www.apexmediasd.com and it was
easy to implement recursively.

I just don''t think that js is required when css does the trick much
easier... what do you think?

Anyway, I just subscribed to this scriptaculous group, so glad to find
that so many of you are enjoying the code that they offer open source,
what a great tool for us developers. Someday I hope I can help!

Chad


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 01 Jun 2007, at 08:30, chwagssd wrote:
> I love scriptaculous, and gzip it when I use it to about 10-15k.
> However, for a menu mouseover solution, I use an accessible css
> solution (yours sounds accessible too), that requires no library, just
> css... actually, have been using this guys css menus for 2 years now,
> cause they''re so darn good. http://www.cssplay.co.uk/menus/ 
> tab_padding.html
> And I used this for a client at http://www.apexmediasd.com and it was
> easy to implement recursively.
>
> I just don''t think that js is required when css does the trick
much
> easier... what do you think?
It depends on how you want your menus to drop down. If you want the  
user to click before the menu opens, you''re going to need javascript  
to bind the click event to the displaying of the menu. If you want  
some fancy visual effect instead of the instant display of the menu  
(when using css :hover), you''ll need to use javascript again.

I tend to avoid javascript if there''s no need for it, but happily use  
prototype/scriptaculous if my app calls for it.


Best regards

Peter De Berdt


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

And IE6 doesn''t allow :hover psuedo elements on anything other than 
anchor tags.  You can use the IE proprietary behavior specification to 
include javascript  which will convert :hover''ed elements into 
javascript showing/hiding functionality in IE6 (and lower).

 - Dash -

chwagssd wrote:
> I love scriptaculous, and gzip it when I use it to about 10-15k.
> However, for a menu mouseover solution, I use an accessible css
> solution (yours sounds accessible too), that requires no library, just
> css... actually, have been using this guys css menus for 2 years now,
> cause they''re so darn good.
http://www.cssplay.co.uk/menus/tab_padding.html
> And I used this for a client at http://www.apexmediasd.com and it was
> easy to implement recursively.
>
> I just don''t think that js is required when css does the trick
much
> easier... what do you think?
>
> Anyway, I just subscribed to this scriptaculous group, so glad to find
> that so many of you are enjoying the code that they offer open source,
> what a great tool for us developers. Someday I hope I can help!
>
> Chad
>
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---