Pure JS - get element's true positioning

by Luis Valle

HTML

<table id="tblRows"></table>
<input class="btnClasss" type="submit" value="Submit" style="position:absolute;top:300px;left:300px;cursor:pointer;"></input>
<div id="dvThing" style="position:absolute;height:30px;width:30px;background-color:orange;display:none;"></div>

JavaScript

$(document).ready(function () {
    for (var i=0; i<80; i++) {
        $('#tblRows').append('<tr><td><input class="btnClasss" type="submit" value="Submit" style="cursor:pointer;"></input></td><td><input class="btnClasss" type="submit" value="Submit" style="cursor:pointer;"></input></td></tr>');
    }
    
    $('.btnClasss').on('click', function () {
        var yourPos = getElementPositionX(this);
        $('#dvThing').css({
            'opacity': 0,
            'display': '',
            'width': yourPos.width,
            'height': yourPos.height,
            'top': yourPos.y + 'px',
            'left': yourPos.x + 'px'
        });
        
        $('#dvThing').css({ 'opacity': 0.8});
    });
});

function getElementPositionX(element) {
    var result = {};
    result.x = 0;
    result.y = 0;
    result.width = 0;
    result.height = 0;
    if (element.offsetParent) {
        result.x = element.offsetLeft;
        result.y = element.offsetTop;
        var parent = element.offsetParent;
        while (parent) {
            result.x += parent.offsetLeft;
            result.y += parent.offsetTop;
            var parentTagName = parent.tagName.toLowerCase();
            if (parentTagName != "table" &&
                parentTagName != "body" && 
                parentTagName != "html" && 
                parentTagName != "div" && 
                parent.clientTop && 
                parent.clientLeft) {
                result.x += parent.clientLeft;
                result.y += parent.clientTop;
            }
            parent = parent.offsetParent;
        }
    }
    else if (element.left && element.top) {
        result.x = element.left;
        result.y = element.top;
    }
    else {
        if (element.x) {
            result.x = element.x;
        }
        if (element.y) {
            result.y = element.y;
        }
    }
    if (element.offsetWidth && element.offsetHeight) {
        result.width = element.offsetWidth;
        result.height =...