javascript - position functions returns 0

Question

Icefaces has a method for positioning a popup WHERE you click the mouse . I disabled the portion of the code where the coordinates of the mouse click are taken because I want to put this menuPopup at the position where my targComp (which is actually a div) is located (so fixed location iso mouse location).

The javascript method called is:

function contextMenuPopup(event, popupMenu, targComp) {
var dynamic = $(popupMenu + "_dynamic");
if (!event) {
    event = window.event;
}
if (event) {
    event.returnValue = false;
    event.cancelBubble = true;

    if (event.stopPropagation) {
        event.stopPropagation();
    }

    var posx = 0; // Mouse position relative to
    var posy = 0; // the document
    /*
     * if (event.pageX || event.pageY) { posx = event.pageX; posy =
     * event.pageY; } else if (event.clientX || event.clientY) { posx =
     * event.clientX + document.body.scrollLeft +
     * document.documentElement.scrollLeft; posy = event.clientY +
     * document.body.scrollTop + document.documentElement.scrollTop; }
     */
    alert(Left(targComp));
    Ice.Menu.showIt(posX, posY, popupMenu, targComp);
}
}

You see that I only commented old code and add an alert to find out if my methods which return the position of the targComp are correctly calculating the value.

function Left( el ) {
var _x = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    el = el.parentNode;
}
return _x;
}

function Top( el ) {
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _y += el.offsetTop - el.scrollTop;
        el = el.parentNode;
    }
    return _y;
}

I do not understand why my alert return 0 when I surely know that my targComp div is not at that left coordinate...

Do you see any problem? (yeah, I know I have to replace the posX and posY at the showIt method, but I'll do that after I am sure that Left and Top are correct (which by the way are copied from here so already confirmed that these methods are working fine...)

Then where it's the problem?

Html code:

<div class="icePnlGrp graMainMenuTabDefault" id="frmMainMenu:divMenuPopupAP" onmouseover="contextMenuPopup(event, 'frmMainMenu:menuPopupAP_sub', 'frmMainMenu:divMenuPopupAPSmall');return false;">
    <label class="iceOutLbl graMainMenuTabText" id="frmMainMenu:j_id54">Application Portfolio</label>
    <div class="icePnlGrp" id="frmMainMenu:divMenuPopupAPSmall" style="border-style:solid; border-width:1px;">
</div>
</div>

Update (after solving the above problem): I attach a screenshot wondering why the mouse position is calculated correctly when I press click inside that targetComp div but the position of the div is wrong...?

Update solved: seems that I do need targCompObject.offsetLeft, targCompObject.offsetTop, instead of calliny those Top and Left functions.

where

targCompObject = document.getElementById(targComp);

So the final call is:

Ice.Menu.showIt(targCompObject.offsetLeft, targCompObject.offsetTop,
            popupMenu, targComp);

Answer 1

You're passing in the id of the target element, not the element itself.

Somewhere in the popup handler you need

targComp = document.getElementById(targComp);

You could make it check first to see whether it's a string, so that you could optionally call it with a DOM element reference too.