Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
Thread: Rearranging layout dynamically
05-07-2007, 12:01 PM #1
- Join Date
- Jun 2006
- Thanked 3 Times in 3 Posts
Rearranging layout dynamically
I have a web application layout that consists of three basic panels:
_________________________ | | | | | Panel B | | Panel A | | | | | | | | |-----------------------| | Panel C | | | |_______________________|
I want to have buttons in each panel that will swap it to the other side without a reload. For example, if the button in Panel C was clicked, C would move to the top, A and B would move to the bottom. If the button in Panel B was clicked, B would move to the left side, A would move to the right side, C would stay in its place.
One of the panels contains an IFRAME which I would really prefer is not reloaded during the switch (it's quite vital to my application that it is not reloaded), therefore any methods that swap the innerHTMLs of two containers will not work.
05-08-2007, 09:26 AM #2
- Join Date
- Apr 2007
- Silicon Valley California
- Thanked 0 Times in 0 Posts
Your problem does not have an easy solution and probably can't be answered in a simple post. I'll give you some things you can look into that might help you.
CSS has a layout feature and you can specify grid layout, with fixed heights and widths. I haven't used this in 5 years, so I'm not fresh enough to explain how it works, but i used it once when I positioned every element on the page statically.
There is another CSS hack you could use to do your columns. Column A will float left and be the entire width of your page, then set a negative right margin that is equal to the width of column B plus any padding you want to use to separate the two columns. Column B will float left, have a defined width, and a height of 100%. If done properly this can produce two equal height columns. Section C will then need clear:both set and you should be good to go.
06-19-2007, 01:11 PM #3
- Join Date
- Jun 2007
- N. Ireland
- Thanked 4 Times in 4 Posts
I would go with a CSS route using DIVs rather than tables.
DIVS can have their float style swapped using JS
The following was posted a while back and is really an eye-opener to what can be done:
Remember CSS is your friend!
Hope this helps.