ansaurus

Question

Answer 1

A:

Don't add the event listener to the panelContainer until the panelChild receives an onmouseover event. In fact, you probably don't need the onmouseover event on the panelContainer element at all. Just add onmouseout to panelChild and you should be fine.

One more thing. The way you have your "show/hide" statements written is a little weird. Here is what I would do:

        if (panel.style.display == "block")
            panel.style.display = "none";
        else
            panel.style.display = "block";

Robusto 2010-03-17 12:34:28

But panelChild is hidden, it's should be displayed when user hovers over the title

mariki 2010-03-17 12:38:05

@mariki: The way your code is written **panelChild** will be displayed when the mouse hovers over the **panelContainer** and hidden when it exits same. If you want the display to happen when you hover over **lnkTitle** then handle the hover on *onmouseover* for **lnkTitle**; in any case, handle the *onmouseout* on **panelChild**. If this is not the behavior you want, please edit your post to clarify.

Robusto 2010-03-17 12:42:53

the child panel should be disaplyed when mouse over the title and stay displayed when mouse over the childpanel.

mariki 2010-03-17 12:47:59

Then add the onmouseover listener to the title to show the panel, and add the onmouseout listener to the panelChild to hide the panel.

Robusto 2010-03-17 13:14:21

I tired that, as soon as try to move cursor form title to childpanel, child panel disappears.

mariki 2010-03-17 13:18:25

Again, childPanel needs to be displayed when mouse is over the title, and ofcourse, when the mouse is over the childpanel itself.

mariki 2010-03-17 13:19:53

OK, here's what you do:1. create a new function that sets a timeOut that calls the show/hide function after a certain period of time *unless canceled*2. add an onmouseout to the lnkTitle that calls this new timeout function and an onmouseover that directly calls the show/hide function.3. add an onmouseout to the panelChild that directly calls the show/hide function and cancels the timeout function

Robusto 2010-03-17 13:54:14

wow, to complicated for this simple functionality

mariki 2010-03-17 15:04:58

Answer 2

A:

Hey,

Or pull the child outside of the parent container and reposition it to underneath the element using javascript.

Brian 2010-03-17 13:07:01

And where should I set the events?

mariki 2010-03-17 13:14:33

If I understand correctly, you move the panel that you want to popup outside the container panel, you have the container panel keep the events, and then when the panel gets shown, you add code to move the child panel to right underneath the control you want the panel to show for, which I assume you want to target the link.

Brian 2010-03-17 14:03:25

and how I do it? p.s the child panel should appear right to the link.

mariki 2010-03-17 15:06:42

http://snipplr.com/view/7911/element-dimensions/ is a utility to get the dimensions of an element, and after getting the left/top, you calculate the new left/top to place the div, setting the style.top or style.left accordingly. JQuery or MS AJAX have some built-in functions if you are using each, doesn't seem like you are from your other comment?

Brian 2010-03-17 20:20:48

Answer 3

A:

Also, since you are using .NET, there is an Ajax Control Toolkit extender, the HoverMenuExtender, that shows or hides a panel when mousing over/out, that you can easily use to set this up. There is a demo at asp.net/ajax

Brian 2010-03-17 14:04:52

I know there that there are tools for it, if I wanted to use them I would use jquery. But I don't.

mariki 2010-03-17 14:41:24

ansaurus

tags:

views:

answers:

Prevent bubbling without Jquery

related questions