javascript div positioning

Question

I am using this script to display an image as popup on mouseover. The difficulty I am facing is that it is not positioning well in different monitor. It must be something to do with resolution.

function LargeImage(obj, e)
{
  var imgbtn=document.getElementById('<%=imgbtn1.ClientID%>');  
  imgbtn.src=obj;//source of the image
  document.getElementById('imgbox').style.visibility="visible";
  document.getElementById('imgbox').style.position="absolute";
  document.getElementById('imgbox').style.left=e.clientX-150 + "px";
  document.getElementById('imgbox').style.top=225 +"px"; 
} 

<div id="imgbox"><asp:imagebutton id="imgbtn1" runat="server" OnClick="ImageButton4_Click"/></div>

Thank you.

Answer 1

You look like you're modifying the style of the imgbox div so that the left position is 150px left of the cursor, but the top position is just 225px from the top of its container (probably).

Should the top style be relative to the cursor as well?

Also, we can't see from your posted code when or how your function is being called. We also have no context for the imgbox element. More information would be useful.

Answer 2

you can do this

document.getElementById('imgbox').style.position="fixed";
document.getElementById('imgbox').style.left=e.clientX + "px";
document.getElementById('imgbox').style.top= e.clientY + "px"; 

which will show the picture at the mouse location in the window (popup stays put if the user scrolls).

otherwise you need to compensate for document scrolling, something like

edit: fix the scroll value (for firefox)

document.getElementById('imgbox').style.position="absolute";
document.getElementById('imgbox').style.left=String(e.clientX+document.documentElement.scrollLeft)+"px";
document.getElementById('imgbox').style.top=String(e.clientY+document.documentElement.scrollTop)+"px"; 

you can look here to find a demo of determining which property to read for scrolling offsets by browser http://www.howtocreate.co.uk/tutorials/javascript/browserwindow