ansaurus

Question

div hide and show javascript having blinking problem in mozilla

Answer 1

A:

Did you ever thought about using a JavaScript Library that is already created and tested for cross-browser?

like jQuery (give you this one because it's the one adopted by Microsoft)

using this library you can write:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>

    <script src="_assets/js/jquery-1.3.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#Popup_tooltip").hide();

            $("#showTooltip").hover(function() {
                $("#Popup_tooltip").show("slow").stop;
            }, function() {
                $("#Popup_tooltip").hide("slow").stop;
            });
        });        
    </script>

    <style type="text/css">
        .tooltip
        {
            width: 180px;
            height: 70px;
            border: solid 1px #ea93ed;
            background-color: #ebf5ff;
            padding: 5px;
        }
    </style>
</head>
<body>
    <a id="showTooltip" href="#">click here to show the tooltip</a>
    <div id="Popup_tooltip" class="tooltip">
        Help contents related to this topic will display here. As a tooltip, if u need for
        help?
    </div>
</body>
</html>

or just use a jQuery Tooltip plugin for example

balexandre 2009-02-10 12:48:02

I didn't downvote this, and the appeal to jQuery is a kneejerk, but in this case it might just get the OP out of self-penned trouble.

annakata 2009-02-10 12:52:52

Answer 2

+1 A:

What exact element are you binding the mouse events to?

There are two common causes of this effect. One is tripping over your own state because the mouseover effectively hides the object which triggers a mouseout when the cursor moves again, ad infinitum. The other is that the two events are on different objects and tripping over one hides itself and triggers an event on the next.

annakata 2009-02-10 12:51:59

Answer 3

A:

Its coming properly in IE but having problem in Mozilla

Works fine for me. You'll have to tell us what exact problem you are having.

left:700;

Should be 700px.

onmouseover and mousehide i call function

Presumably you mean onmouseout.

bobince 2009-02-10 12:52:36

Answer 4

A:

The MouseOut event will fire when you move into the area of one of the children elements of the element that the event handler is established on.

I have taken the code from the wonderful jQuery in Action to demonstrate here

The first div (Outer 1) has event handlers for mouseover and mouseout events. Each time an event is raised, the eventhandler writes the name of the event underneath the divs. When you cross the boundary between Outer 1 and Inner 1, the mouseout and mouseover event handlers fire, which in your case is causing the flicker.

The second div (Outer 2) has event handlers for mouseover and mouseout events but these have been created through the jQuery .hover() command. When the boundaries between Outer 2 and Inner 2 are crossed, the event handlers do not fire, but do when the mouse crosses the Outer 2 boundary.

I believe this is your problem.

Note: This is not an answer to say "use jQuery" - I have only used jQuery code to highlight the problem.

Russ Cam 2009-02-10 13:18:05

Answer 5

A:

My colleague faced with same problem. Following was our problem, please check if it matches with you:

In our case, the tooltip was a div element which was hidden and gets visible when the mouse was moved over a link. Moreover when the mouse moved out of the link, the div element gets hidden.

The problem with our code was that, the tooltip, when it got visible, came over the link. So, the mouse cursor was effectively resting on the tooltip. That is, the mouse was not on top of the link but on top of the tooltip. In this case, the Mozilla Firefox triggers a 'onMouseOut' event which leads to disappear the tooltip.

Now the mouse cursor is on the link, so the 'onMouseOver' event is fired and the tooltip gets visible. This goes on and on and on...

Solution will be to use a higher z-index property for tooltip than link. Try to make sure that the z-index values given is positive numbers as the Firefox doesnot recognise negative numbers.

Shree 2009-02-10 14:18:56

Answer 6

A:

I came across what seems to be a similar problem. The user moves the pointer on top of an image, and a div floats above the page at the pointer's position while showing another image. There didn't seem to be a problem with IE, but the entire div flickered with Firefox.

What Shree said about the pointer being above the tooltip helped me fix this. What I did was, instead of setting the x and y of the div to the exact location of the pointer, I placed it off by 2 or 3 pixels. This way the mouse can be prevented from going over the div and thus triggering the mouseout event. Not a very elegant way of fixing it, but it works if you can live with your tooltip being 2-3 pixels too high.

Yves 2009-11-13 09:02:39

ansaurus

tags:

views:

answers:

div hide and show javascript having blinking problem in mozilla

related questions