Question

My DNN module has some imagebuttons that show a sub-menu when clicked. The absolute position of the menu is calculated using javascript, as expected. This has worked well till now (In DNN4 and DNN5). But we are noticing a problem in DNN6. The menu position is off by a significant number of pixels (probably a couple hundred).
Since I did not write the calculation code, and neither am I a JS expert, I cannot understand how DNN6 is affecting it.
Here is the function:

function AbsolutePosition(obj) {
        var pos = null;
        if(obj != null) {
            pos = new Object();
            pos.top = obj.offsetTop;
            pos.left = obj.offsetLeft;
            pos.width = obj.offsetWidth;
            pos.height= obj.offsetHeight;
            obj = obj.offsetParent;
            while(obj != null) {
                pos.top += obj.offsetTop;
                pos.left += obj.offsetLeft;
                obj = obj.offsetParent;
            }
        }
return(pos);
}

I would like to understand how this code can be affected by the parent page structure – because changing the skin did not make any difference. This has something to do with how page elements are organized.

Edit: And I am also looking for suggestions regarding any modifications to the code that I could try.

Any input appreciated! Thanks.

Answer 1

This has to do with how absolute positioning works. When an element is absolutely positioned, its position (indicated by the top and left elements in the code above) is relative to its closest ancestor with a position style of either relative or absolute. In DNN 6, module wrappers now have position: relative specified on them (which the new action menu uses for positioning). There might also be some similar changes for the new control panel (if the menu isn’t in a module).

You might try this script, which stops climbing the tree if the element’s position is absolute or relative:

function AbsolutePosition(obj) {
    if (!obj) {
        return null;
    }

    var pos = {
        top: obj.offsetTop,
        left: obj.offsetLeft,
        width: obj.offsetWidth,
        height: obj.offsetHeight
    },
    positionsToStopAt = {
        relative: true,
        absolute: true
    };

    obj = obj.offsetParent;
    while(obj && !positionsToStopAt[jQuery(obj).css('position')]) {
        pos.top += obj.offsetTop;
        pos.left += obj.offsetLeft;
        obj = obj.offsetParent;
    }

    return pos;
}