Resize based on inputs possible?

I’m not sure if anyone knows of a plugin, or a practical way to achieve this little challenge I have!

I need to display an image of a window which resizes based on inputs.

I think maybe the image could be a shape, but I need basic lines to illustrate the partition between window openers so users can see what they are buying.

See the image below, there will be inputs to add height and width and the image needs to adjust to retain it’s proportions. May vector pictures?

Here’s a video which shows (from 30 seconds) an example of the type of thing I need.

1 Like

Hi! You could do it with Vectors (for complex shapes) but also with plain html, i don’t know your coding knowlege, but it could be done with simple html, css, js. I wrote a simple code snippet using html, css, js. i’m pretty sure that it can be done in Bubble using an HTML element in the editor and updating the code dynamically.
It doesn’t change the proportions 100% accurate, but the general idea is working, you could edit the styles/refactor the code a little bit and it should work, the lines could be printed in the glasses with js+css, what you should do is converting the real life width/heights from cms to px.

Link to CodePen

1 Like




Wow thanks, that is very useful and points me in the right direction. Very kind of your to provide the CodePen settings and editor.

1 Like

Sorry for some reason I thought I had replied … wow your solution works very nicely and I love the smooth animation as the shape resizes. I am going to look at yoru editor and see how you achieved it … thanks!

1 Like

Hi I have been trying to recreate what you have done but only the height is adjustable? Can you spot anything I am missing from this test page? [feel free to edit it if easier]. Thanks in advance!

1 Like

it works for the new responsive engine only
please try it out and let me know if you still have questions

Ah that’s a shame, I don’t use the new engine … I tried but found it difficult. I will have a think … thank you though.

1 Like

I recommend using the new one. It’s difficult at the beginning only.