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.
Expand|Select|Wrap|Line Numbers
- 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;
- }
- }
- ...