0

I have created popup but I have problem with it. It flaps.
What is problem, can somebody comment it. Thanks in advance.
---------------------

<head>
    <title>My Popup</title>
    <style type="text/css">
        #popupcontent
        {
        }
        .InfoPopup
        {
            position: absolute;
            visibility: hidden;
            overflow: hidden;
            border: 1px solid #CCC;
            background-color: #F9F9F9;
            border: 1px solid #333;
            padding: 5px;
        }
        .text
        {
            text-decoration: none;
            background: #FFFFFF;
            color: #000000;
        }
    </style>
</head>
<body>

    <script type="text/javascript" language="JavaScript">
        
        function showPopup(parent,id){  
            var popUp = document.getElementById(id);
            popUp.style.display = "";
            
            
            popUp.style.top = findPosY(parent) + "px";
            popUp.style.left = findPosX(parent) + "px";
            
            popUp.style.width = "140px";
            popUp.style.height = "70px";
            popUp.style.visibility = "visible"; 
            
           
        }
           
        function hidePopup(id){
            var popUp = document.getElementById(id);
            popUp.style.visibility = "hidden";
            }
            
             function findPosX(obj)
            {
                var curleft = 0;
                if(obj.offsetParent)
                while(1) 
                {
                curleft += obj.offsetLeft;
                if(!obj.offsetParent)
                break;
                obj = obj.offsetParent;
                }
                else if(obj.x)
                curleft += obj.x;
            return curleft;
            }

        function findPosY(obj)
        {
            var curtop = 0;
            if(obj.offsetParent)
            while(1)
            {
            curtop += obj.offsetTop;
            if(!obj.offsetParent)
            break;
            obj = obj.offsetParent;
            }
            else if(obj.y)
            curtop += obj.y;
            return curtop;
        }
 
    </script>

    <p>
    </p>
    <a href="#" onmouseover="showPopup(this,'id1');" onmouseout="hidePopup('id1');"><span
        class="text">Open popup 1</span></a><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> <a href="#" onmouseover="showPopup(this,'id2');"
            onmouseout="hidePopup('id2');"><span class="text">Open popup 2</span></a>
    <p>
    </p>
    <a href="#" onmouseover="showPopup(this,'id3');" onmouseout="hidePopup('id3');"><span
        class="text">Open popup 3</span></a>
    <p>
    </p>
    <a href="#" onmouseover="showPopup(this,'id4');" onmouseout="hidePopup('id4');"><span
        class="text">Open popup 4</span></a>
    <p>
    </p>
    <div class="InfoPopup" id="id1">
        <font color="#00FF00" size>This is a popup window !</font><br />
        <font color="#FF0F00">Popup is very nice!</font>
    </div>
    <div class="InfoPopup" id="id2">
        <font color="#00FF00" size ="2pt">This is a popup window !</font><br />
        <font color="#FF0F00" size ="2pt">Popup is very nice!</font>
    </div>
    <div class="InfoPopup" id="id3">
        <table>
            <tr>
                <td>
                    <font color="#0000FF">This is my popup</font></td>
            </tr>
        </table>
    </div>
    <div class="InfoPopup" id="id4">
        <table>
            <tr>
                <td>
                    <font color="#FF0000">Hello I am a popup table</font></td>
            </tr>
        </table>
    </div>
</body>
</html>
2
Contributors
1
Reply
4
Views
8 Years
Discussion Span
Last Post by buddylee17
0

This is a common problem, as text is so small. There is very little area to define where the mousover stops and the mouseout starts. So the display constantly toggles as the mouse wont sit perfectly still.
In Flash, this is often cured by creating an invisible box to place over the text and triggering the event with a mousover(actually its called onRollOver in ActionScript) the box.
Similarly in CSS, you could place an invisible div over the text and give it the mouse events, giving more area to define where the mouseover and mouseout are executed.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.