Member Avatar for SharePoint

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
  • 84 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by buddylee17
Member Avatar for buddylee17

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.