How can I make an HTML element follow the rest of the game graphics on browser resize?

Hi!

I really love the possibility of using 3D CSS animations in my games using the HTML element plugin.

Everything else seems to work at the moment, but I haven't figured out how to make the added HTML element follow the rest of the sprites when they adapt to differently shaped browser windows.

Here is an example file:

file.io/Ogmz3YGmKC5c

In the example, how can I make the circle follow the position and size of the square?

Okay if I give the circle element this CSS, then it seem to stick to the center of the cube:

#insert{

width:10em;

height:10em;

position: absolute;

left: 32em;

top: 16em;

}

Next I will try to figure out the formula to accurately convert the pixel position from construct to em's.

Okay here's how I made it work realiably:

-Set the image points of elements to their top left corners

-Create the HTML element at 0,0 coordinates

-Take the Construct editor coordinate of the target object (to which you want to attach an HTML element)

-Divide the x coordinate with 16 and the y coordinate with 16 in order to get em's

It would be really nice to have some built-in way of "anchoring" HTML elements to regular object instances!

The original link doesn't seem to work any more. But Construct already automatically positions and sizes the HTML element to match the object's place in the layout. So you can move and size it normally in the layout, including positioning it relative to other objects, and it will update automatically.

Usually all you need to do is add some content that sizes to fit its container, or uses "em" sizing to follow the size of the game.

Hi!

Thank you so much for your reply Ashley!

I made a better demo and uploaded it to DropBox:

dropbox.com/s/z3itdj0ulrpqk41/cssRotationExample.c3p

Can you see how the door graphic added dynamically jumps all over the place when the browser is resized? But if you uncomment the last CSS rule in the CSS file, then it will stay properly in it's place.

Did I understand you correctly that there would be a better way of "anchoring" the dynamically added door element to the rest of the sprites?

It's much easier than that: put the HTML element where you want it to go, set the image to have width/height 100%, and then it resizes to fit the container which Construct positions for you. Example (using r314): https://www.dropbox.com/s/9km4sss1hc7xd6f/html-positioning.c3p?dl=0

Thank you very much!

Nice to see that it's even simpler than I thought!