mouseover only works correctly on second mouseover.

[dave345]

This javascript issue is in an app using C# / .Net 2.0 running on XP.
First post, please mention if I mess up any conventions of this forum.

I’ve got a mouseover event that only works properly the second time it fires if the page has been scrolled a lot. The mouseover displays an image in a div that is placed near the mouse cursor. When the rollover occurs near the bottom of the page, the coordinates are altered so that the entire image is visible – instead of the default location with the top of the image next to the cursor.
This works fine until the user scrolls down. Then, on the mouseover the image appears in its default location even if the cursor is near the bottom of the page so the image is cut off. If you move the cursor off of the location and then back over it, it works correctly.
I output the coordinates of the image and can see that it isn't corrected the first time around, but is the second. It seems to be failing on the line below. This is what determines whether to reset the style.pixelTop of the image.

Thanks in advance, Dave R.

if (tooltip.style.pixelTop + tooltip.offsetHeight > fullHeight) 
 
Here is all of the relevant code.
...
    var tooltip = null;
    var txtDisplay = new String();
    var strImgPath = inData;
 
    txtDisplay += "<table><tr><td valign=top>";
    txtDisplay += "<br /><br /><img border=1 src='" + strImgPath + "' /><br /><br />";
    txtDisplay += "</td></tr></table>";    
 
    // IE only
    if (!(document.layers && !document.getElementById)) 
    {
 
        if (document.all) 
        {
            tooltip = document.all.TooltipDIV;
 
            if (!tooltip) 
            {
                return;
            }
 
            // get position values
            var mouseX = inEvent.clientX;
            var mouseY = inEvent.clientY;
            var fullWidth = document.body.scrollLeft + document.body.offsetWidth - 10;
            var fullHeight = document.body.scrollTop + document.body.offsetHeight - 10;
 
            tooltip.innerHTML = txtDisplay;
 
                tooltip.style.left = document.body.scrollLeft + mouseX + 20;
            tooltip.style.top = document.body.scrollTop + mouseY - 50; 
 
            tooltip.style.display = "block";
            tooltip.style.visibility = "visible";
            tooltip.style.position = "absolute";
 
            if (tooltip.style.pixelTop + tooltip.offsetHeight > fullHeight) 
            {
                tooltip.style.pixelTop = (document.body.scrollTop + document.body.offsetHeight) - tooltip.offsetHeight - 10;
            }
 
        }
 
...
 

[acoder]

Welcome to TSDN!

Perhaps you could try:

if ((tooltip.style.pixelTop + tooltip.offsetHeight) > fullHeight)