This question may seem odd and hacky, but I've got an interesting idea and I'm not sure if it can be done.
I am working on an application that was mostly constructed by someone before me. In a sense, I'm taking the application over. The original author hard-coded element sizes into style tags of multiple HTML templates (yes, angular.js is being used). I want to change that.
I would like to set the dimensions of all of the objects to percentages so that I may maintain proportions upon screen sizes. I will keep a reference of the hard-coded dimensions of the parent container, and then take the size that is hard-coded for the child and translate it into a percentage. I need some way of doing this.
What I am trying to do is collect every single page element after the page loads. This is no problem. I can iterate through the window element for nearly every single child, change the dimensions to percentages, re-apply those percentages, and then set an eventListener on the object to watch for a screen resize (either that or hold a reference to the element and set one watch for screen resize). This can be done, and yes, it can be slow, but it gets trickier.
Not every element on the page is hard-coded in, some are generated dynamically through JavaScript. I need to detect when a dynamically constructed screen element is generated, grab that element, and alter it. Is there any way to set up a listener for this? Maybe a listener for the append function? Once again, this is not high priority, this is just speculation.