How to convert a fixed height/width-fixed layout to elastic?

Question

I used the same software used here http://us.gn.bartal.org/ to create a fixed width/height treemap in HTML + CSS.

I would like to make it elastic by having a JavaScript function to convert all pixels absolute positions and sizes to percentages.

How would you suggest to proceed? Is there some jQuery/Prototype/Dojo magic that I can exploit?

Answer 1

Your basic process would be something like this:

• Identify the elements that need resizing
• Write some JQuery to find the sizes of those elements
• Calculate the percentages (or other values)
• Make the adjustments
• Subscribe to all relevant resize events
• Recalculate the sizes on each resize event