positioning JS popup in Fx

Question

I have the following code that positions a popup under an element. This works properly only if the Fx window is maximized. What do I add to account for window's position relative to the screen, so it works for a window in Normal mode as well?

var elm = document.getElementById("back-forward-dropmarker");
var x = elm.boxObject.x;
var y = elm.boxObject.y + elm.boxObject.height + 19;
document.getElementById("backForwardMenu").showPopup(elm, x, y, "popup", null, null);

Answer 1

The trick is to use CSS and show/hide with javascript. With CSS you can position where exactly items will appear in the browser. Absolute position defines exactly where within the browser that the item should appear. Relative positioning defines where an item is placed within the browser based on its relationship to another item already on the page. In this example, we place on image 100 pixels from the top and left of the browser window and a second image will be rendered 200 pixels from that initial image.

<img style="position: absolute; top: 100px; left: 100px;" 
src="images/logo1.gif">

<img style="position: relative; top: 200px; left: 200px;" 
src="images/logo2.gif">

Answer 2

Use boxObject.screenX, screenY instead of x,y:

var elm = document.getElementById("back-forward-dropmarker");
var mnu = document.getElementById("backForwardMenu");

var x = elm.boxObject.screenX;
var y = elm.boxObject.screenY + elm.boxObject.height;

mnu.showPopup(elm, x, y, "popup", null, null);

But since there is no offset, it's simpler to use popupanchor and popupalign instead:

mnu.showPopup(elm, -1, -1, "popup", "bottomleft", "topleft");

which means "position the top left corner of the popup next to the bottom left corner of the element". Note x and y must be -1 in this case.