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
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Post Help with auto adjustable div box

    Hello,

    I need some help! I have a div box that sticks 10px away from the right and bottom edge of the browser window and auto adjusts itself when the browser is resized. It works perfectly, however, when the window is resized to it's smallest size either virtically or horrizontally, I get a js error. Here is the code. Can someone please help!

    Code:
    <HTML>
    <HEAD>
    <TITLE>Example</TITLE>
    <script type="text/javascript" language="javascript">
    <!--
    function chk(){
    //width setting
    my_div=document.getElementById("adjustBox")
    left_space=document.getElementById("adjustBox").offsetLeft
    right_space=10
    my_div.style.width=document.body.clientWidth-left_space-right_space
    
    //height setting
    my_div=document.getElementById("adjustBox")
    top_space=document.getElementById("adjustBox").offsetTop
    bottom_space=10
    my_div.style.height=document.body.clientHeight-top_space-bottom_space
    }
    onresize=chk
    onload=chk
    //-->
    </script>
    <style type="text/css">
    <!--
     body {
    overflow: hidden;
    }
    div#adjustBox {
    /*position:absolute;
    top: 0px;
    left: 0px;*/
    padding:10px;
    width:100%;
    height:100%;
    overflow: auto;
    background-color:#ccc;
    overflow-x:auto;
    border:1px solid #000;
    }
    -->
    </style>
    </HEAD>
    <BODY>
    <div style="border:1px solid #517191; background-color:#6688A4; height:18px; width:100%;">&nbsp;</div>
    <div id="adjustBox">
    
    </div>
    </BODY>
    </HTML>

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by bigalo View Post

    Code:
    my_div.style.width=document.body.clientWidth-left_space-right_space
    
    my_div.style.height=document.body.clientHeight-top_space-bottom_space
    These statements (at least the second) evaluate to a negative number. If it's your code you'll know how to fix it....but then if it were your code you would have determined the cause in moments so:
    Code:
    my_div.style.width = Math.max(0, document.body.clientWidth-left_space-right_space);
    
    my_div.style.height = Math.max(0, document.body.clientHeight-top_space-bottom_space);

  • Users who have thanked Arty Effem for this post:

    bigalo (10-17-2008)

  • #3
    New Coder
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    58
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks Arty! This worked perfectly!!!

    Cheers!


  •  

    Posting Permissions

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