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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adjusting table size with browser window size

    How do you get a tables' height to change in real-time when a user adjusts the browser window size horizontally???

    For instance... I have a table with the width fixed to 100% and the height fixed to 25%. Obviously, in HTML, the table width will change when the browser width is changed and the table height will change when the browser height is changed...which is all well and good. BUT, if the user leaves the browser height stationary and only resizes the browser width(squeezes it), the table height will stay the same. I need it to change.

    Although my knowledge is limited, it seems well within the scope of JavaScript.

    I searched the forum/web with no success. Thanks for any help in advance!
    Last edited by lunarmuun; 05-07-2004 at 03:55 AM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    Quote Originally Posted by lunarmuun
    BUT, if the user leaves the browser height stationary and modifies the width(squeezes it) of the browser, the table height will stay the same. Therein lies the problem.
    What's the problem with that? That's the correct and expected behavior.

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn,
    If you read the post in its entirety, it should make sense. But, to be on the safe side, I changed some grammar in the post so that it might be clearer...

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts
    What I meant was if you set the table height to 100% and you resize the browser's width without resizing its height, then naturally the height of the table won't change. I was just pointing out that it is the expected behavior and if you need to change that natural behavior, then you need to script it.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Try setting dynamically the table's width and height

    <script>
    function setUp(){
    document.getElementById('tab').style.width=document.body.clientWidth;
    }
    document.getElementById('tab').style.height=document.body.clientHeight/4;
    }

    window.onload=setUp;
    window.onresize=setUp;
    </script>

    ....

    and in body

    <table id="tab">
    ...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks KOR !!

    I tried the code...at first nothing, then noticed one too many brackets in the syntax. Took it out and bam! Then I just rearranged your code a bit to complete the solution to the above stated problem. So now the table keeps the same aspect ratio asigned.

    <script>
    function setUp(){
    document.getElementById('tab').style.height=document.body.clientWidth/6.4;
    }

    window.onload=setUp;
    window.onresize=setUp;
    </script>

    ......

    <table id="tab" width="100%" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>The table keeps the same aspect ratio!</td>
    </tr>
    </table>


    Again, thanks for the help !


  •  

    Posting Permissions

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