First, I have only played with Prototype for about a month, so I don''t
know it well. Second, I am more of a server-side programmer than a
client-side programmer.
In my page, I have a div that appears as a result of a link mouseover
event. This div is nested within another div that houses everything
(id = ''menuContainer''). I want the resulting div (which is a
submenu)
to disappear when the user moves the mouse away from the container
div. I''ve done a lot of research. MouseEnter and MouseLeave do
exactly what I want them to do, but I don''t know how to write these in
Prototype or even JavaScript. Alternately, I would want MouseOver and
MouseOut to not bubble down to their children.
Currently, I have the following code:
Event.observe(''menuContainer'', ''mouseout'',
function(e){
if (!e.descendantOf(''menuContainer'')) {
hideSubmenu( activeSubmenu );
activeSubmenu = '''';
}
});
You guessed it. It doesn''t work. I don''t even know how to
get access
to whatever element the mouse is currently over to check if it is a
descendent of ''menuContainer''.
It would be really nice if there were good Prototype resources out
there, but I can''t find them. The API documentation on the site is
good, but it assumes you''ve already mastered previous versions of
Prototype. Which I haven''t. Needless to say, I''m very
frustrated.
I''ve spent all day looking for some solution and I cannot find
anything.
--~--~---------~--~----~------------~-------~--~----~
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 Apr 17, 8:47 am, nanotasher <nanotas...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> First, I have only played with Prototype for about a month, so I don''t > know it well. Second, I am more of a server-side programmer than a > client-side programmer. > > In my page, I have a div that appears as a result of a link mouseover > event. This div is nested within another div that houses everything > (id = ''menuContainer''). I want the resulting div (which is a submenu) > to disappear when the user moves the mouse away from the container > div. I''ve done a lot of research. MouseEnter and MouseLeave do > exactly what I want them to do, but I don''t know how to write these in > Prototype or even JavaScript.While HTML attribute names are not case sensitive (so capitalisation is irrelevant) that doesn''t hold for javascript, it''s case sensitive. The events are called "mouseenter" and "mouseleave", the related HTML attributes (when called from script) are "onmouseenter" and "onmouseleave". These are IE proprietary events that are not supported by most other browsers, so use mouseover and mouseout.> Alternately, I would want MouseOver and > MouseOut to not bubble down to their children.Events never bubble down the DOM tree, bubbling goes up. The W3C event model includes a capture phase which goes down the DOM tree but since it isn''t implemented by IE, it''s rarely used. <URL: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-eventPhaseType>> Currently, I have the following code: > > Event.observe(''menuContainer'', ''mouseout'', function(e){ > if (!e.descendantOf(''menuContainer'')) {The first parameter passed to the function will be a reference to the event object that caused the function to be called. In this case, e will refer to the event object, not to the element that fired the event. Since you are attaching the event to menuContainer, the *only* events that it will receive are bubbling events from its decendents (assuming you aren''t using the capture phase), therefore the above test is pointless. You might want to see which element fired the event so you can tell whether to do something or not. In plain javascript you''d write: var element = e.target || e.srcElement to cover the W3C and IE event modles resepectively. In Prototype.js you''d use: var element = Event.element(e); and then you might do (in Prototype.js): if (element.descendantOf( <elementRef or id> )( { // ... } In plain javascript you''d write a function like: function isAncestor(el, ancestor) { var p; while (el.parentNode && (p = el.parentNode)) { if (p == ancestor) { return true; } } return false; } and then: if (isAncestor(element, parent)) { // parent is an ancestor of element }> hideSubmenu( activeSubmenu );What does the identifier "activeSubmenu" refer to? Presumably elsewhere you''ve assigned it a reference to an element.> activeSubmenu = '''';This seems to be an attempt to avoid a closure, however to do that you break the closure in the outer function, not the inner one. -- Rob --~--~---------~--~----~------------~-------~--~----~ 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 17.4.2008, at 5.39, RobG wrote:>> Alternately, I would want MouseOver and >> MouseOut to not bubble down to their children. > > Events never bubble down the DOM tree, bubbling goes up. The W3C > event model includes a capture phase which goes down the DOM tree but > since it isn''t implemented by IE, it''s rarely used. > > <URL: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-eventPhaseTypeSlightly related FYI: http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html //jarkko -- Jarkko Laine http://jlaine.net http://dotherightthing.com http://www.railsecommerce.com http://odesign.fi
Rob: This gets me closer, thanks. I think my biggest problem is that I don''t know DOM and I''m trying to work some Prototype code. I should just stick to C. :) On Apr 16, 10:39 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:> On Apr 17, 8:47 am, nanotasher <nanotas...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > First, I have only played with Prototype for about a month, so I don''t > > know it well. Second, I am more of a server-side programmer than a > > client-side programmer. > > > In my page, I have a div that appears as a result of a link mouseover > > event. This div is nested within another div that houses everything > > (id = ''menuContainer''). I want the resulting div (which is a submenu) > > to disappear when the user moves the mouse away from the container > > div. I''ve done a lot of research. MouseEnter and MouseLeave do > > exactly what I want them to do, but I don''t know how to write these in > > Prototype or even JavaScript. > > While HTML attribute names are not case sensitive (so capitalisation > is irrelevant) that doesn''t hold for javascript, it''s case sensitive. > The events are called "mouseenter" and "mouseleave", the related HTML > attributes (when called from script) are "onmouseenter" and > "onmouseleave". These are IE proprietary events that are not > supported by most other browsers, so use mouseover and mouseout. > > > Alternately, I would want MouseOver and > > MouseOut to not bubble down to their children. > > Events never bubble down the DOM tree, bubbling goes up. The W3C > event model includes a capture phase which goes down the DOM tree but > since it isn''t implemented by IE, it''s rarely used. > > <URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-even... > > > > > Currently, I have the following code: > > > Event.observe(''menuContainer'', ''mouseout'', function(e){ > > if (!e.descendantOf(''menuContainer'')) { > > The first parameter passed to the function will be a reference to the > event object that caused the function to be called. In this case, e > will refer to the event object, not to the element that fired the > event. > > Since you are attaching the event to menuContainer, the *only* events > that it will receive are bubbling events from its decendents (assuming > you aren''t using the capture phase), therefore the above test is > pointless. > > You might want to see which element fired the event so you can tell > whether to do something or not. In plain javascript you''d write: > > var element = e.target || e.srcElement > > to cover the W3C and IE event modles resepectively. In Prototype.js > you''d use: > > var element = Event.element(e); > > and then you might do (in Prototype.js): > > if (element.descendantOf( <elementRef or id> )( { > // ... > } > > In plain javascript you''d write a function like: > > function isAncestor(el, ancestor) { > var p; > while (el.parentNode && (p = el.parentNode)) { > if (p == ancestor) { > return true; > } > } > return false; > > } > > and then: > > if (isAncestor(element, parent)) { > // parent is an ancestor of element > } > > > hideSubmenu( activeSubmenu ); > > What does the identifier "activeSubmenu" refer to? Presumably > elsewhere you''ve assigned it a reference to an element. > > > activeSubmenu = ''''; > > This seems to be an attempt to avoid a closure, however to do that you > break the closure in the outer function, not the inner one. > > -- > Rob--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---