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 <[EMAIL PROTECTED]> wrote: > 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-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@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 -~----------~----~----~----~------~----~------~--~---
