On Apr 17, 8:47 am, nanotasher <[EMAIL PROTECTED]> 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@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
