element-queries | library agnostic bit of code that enables element | Frontend Framework library

I have an HTML layout in the following form

How do I get an elements position, if it's centered using CSS margin:auto command? Here is the fiddle:

https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/

Click on the element with red border. It should alert you it's position relative to the parent table. top positioning is right, but left is 1, which is incorrect. To solve the problem, I could find out parents width, then red bordered elements width and calculate its position mathematically, but is there a better, more efficient way to do this?

I'm using transform: scale(); transform-origin: 0 0; to zoom page content. I'm changing scale when the user scrolls the page and set transform-origin based on pointer placement. It' works, but has one problem. If the user moves mouse pointer and scrolls, content jumps to the pointer and zooms there. What am I doing wrong and how do I fix it? I need my transform origin to be the pointer location on the table. Here is my code and working fiddle:

https://jsfiddle.net/vaxobasilidze/v0pLwqd8/1/

Hover the table and scroll. It'll be zoomed. Then move mouse pointer to another place on the table and scroll again. Content starts jumping. I need to get zooming effect similar to the google maps have. What is the problem in my code?

I'm trying to dynamically resize an element using JQuery .animate method, but it does not work:

I have created few widgets, which should be draggable anywhere on the screen and resizable by the user. I managed to make them draggable, but can't make them resizable. here is the fiddle:

https://jsfiddle.net/vaxobasilidze/reL880g8/

What am I doing wrong? I have other elements too, which I make draggable and resizable by the same way, but for an unknown reason this does not work only on this widget.

I used this seemingly fancy CSS-Element-Queries tool for some basic element manipulations that will be started every time a window is resized.

Briefly, I wanted to change the value of an element's attribute based on current window width i.e. every time when the window is somehow resized I want to check its width and subsequently do something with a certain element.

I did everything like it is in the tutorial but something must be wrong since it is not working at all. Here is the code:

I'm using css-element-queries (https://github.com/marcj/css-element-queries) to apply styles based on the element's size, but I'm also dynamically adding elements via an ajax call. Elements loaded via ajax are not being styled properly, presumably because they aren't present when the css-element-queries script is executed. css-element-queries runs automatically on window.load so I'm unclear on how to get it to run after the ajax call is successful. I'm using jquery, so jquery-specific responses are welcome.

When resizing the window in this fiddle https://jsfiddle.net/kaljak/fuzxqkmz/4/ the image (its container) is resized and the image rescales according to that.

The resizing is made by Css-element-queries (https://github.com/marcj/css-element-queries)