Is there a more efficient way to determine the position of an element that is centered using CSS margin:auto? Take a look at this fiddle:
https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/
If you click on the element with the red border, it should alert you about its position relative to the parent table. The top positioning seems accurate, but the left is showing as 1 which is incorrect. One possible solution could involve calculating the position mathematically by considering the parent's width and the width of the red-bordered element. However, are there better alternatives or more efficient methods to achieve this?
$('body').on('click', '.placeHolder', function(){
alert($(this).position().left+', '+$(this).position().top);
}).channels {
/*border-collapse: collapse;*/
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-weight: bold;
border: 1px solid rgba(30, 30, 30, 1);
border-radius: 4px;
overflow: hidden;
background: url(images/comment-bg3.png) repeat;
resize: both;
}
.channels td {
border-left: 1px solid rgba(30, 30, 30, 1);
}
.channels td:first-child {
border-left: none;
}
.channelHeader {
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table class="channels ui-draggable ui-resizable" style="width: 476px; height: 266px; position: relative;" oncontextmenu="return false;" id="mainDiv">
<tbody>
<tr class="channelHeader ui-draggable-handle">
<td colspan="5" class="channelName" id="channel1" audiopid="[0x33]" audiostream1="format:mp2,type:audio,pid:[0x33],width:0,height:0" interface="192.168.222.15" method="info" multicast="239.10.20.101" port="6000" protocol="udp" resolution="1920x1080" serviceid="1" servicename="undefined" serviceprovider="provider" videopid="[0x31]" videostream="format:h264,type:video,pid:[...]
...