Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Rearranging layout dynamically

    I have a web application layout that consists of three basic panels:

    Code:
    _________________________
    |             |         |
    |             | Panel B |
    |   Panel A   |         |
    |             |         |
    |             |         |
    |-----------------------|
    |         Panel C       |
    |                       |
    |_______________________|
    I need Panel A to have fixed pixel dimensions, whilst Panels B and C fill the remaining space (no scrollbars). Currently this is achieved in the top two panels with a table row (yes, table layouts is bad, but it was (and is) the best solution as far as I know). The bottom row's height is set with a Javascript function that detects the available height, and then subtracts the height of Panel A. The function is executed onresize, also. (There is surely something wrong with CSS or my thinking if this is necessary for what I want.)

    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.

    This cannot be achieved with the current layout method, so I need to try and think of another method. One approach would be to use Javascript to determine the height and width of the screen, dynamically size Panels B & C, and absolutely position them. Changing their position would then only be a matter of changing their CSS positioning.

    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.

    What I want to know is what is the best method to achieve what I want? Is it absolutely positioning with Javascript-determined dimensions, or is there a better way?

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    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.

    If you want to use JavaScript to manage your content sizes, check out http://extjs.com. They have a free JavaScript layout manager that you can use or model your own after.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    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:

    http://homepage.mac.com/igstudio/des...s-to-DIVs.html

    Remember CSS is your friend!
    Hope this helps.

    D.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •