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 to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto resize DIV in Javascript - see example #Newbie help#

    Hi there

    I'm a newbie to Javascript, so bear with me!

    am attempting to make a DIV resize automatically using Javascript.
    Why you ask?

    Well, I have a CSS driven website: http://www.realbabyguide.co.uk/ which has left, right and centre sections. Unless the middle section is populated with enough content, the lower border crashes into the left and right sections. I want to control the DIV height of the main section.

    I have written the code and it works in IE7, but not in Firefox.
    Removing the Doctype enables it to run in FF.
    I validated the code and it passed.

    Here it is in action: http://www.realbabyguide.co.uk/div%20heights.html

    I suspect my code is at fault...
    Any ideas?
    Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html>
    <head>
    <title>A Test</title>
    <style type="text/css">
     body
     {
     background-color:#00CCFF;
     }
     
     .outer
     {
     font-size: 16px;
     background-color:#00CC00;
     padding: 10px;
     width: 100%;
     border-width: 1px;
     border-style: solid;
     border-color: #cc0000;
     }
     #inner
     {
     font-size: 16px;
     background-color:#CC6633;
     padding: 10px;
     width: 50%;
     border-width: 1px;
     border-style: solid;
     border-color: #cc0000;
     }
     
    </style>
     
    </head>
    <body>
    <script language="javascript" type="text/javascript">
    function getOff()
    {
     x = document.getElementById('inner');
     return x.offsetHeight;
     }
    function changeOff(amount)
    {
     amount = 600-getOff();
     var y = getOff();
     x.style.height = y + amount;
    }
    </script>
     
    <div class="outer">
     <div id="inner">
     
       <h1>This script resizes my "inner" DIV height to 600px - the current height.</h1>
     
       <p>However, although it works in IE7 (haven't tried other IE versions), it will not work in Firefox (2.0.0.1).<br />
       Removing the Doctype enables it to work in Firefox, but screws up IE7 as it renders the page in Quirks mode.<br />
       The page    
       <a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a>
       </a> 
       <br />
       Any ideas? 
       </p>
     
     </div><!-- Close inner DIV -->
     
    </div><!-- Close outer DIV -->
    <a href="javascript:changeOff()">Click here and the DIV should resize</a>
    </body>
    Last edited by monkey64; 02-04-2007 at 08:43 AM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    x.style.height = y + amount+'px';
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Vwphillips, thanks a million, you sorted it out!
    It's so helpfull to have a forum like this, thanks again.


  •  

    Posting Permissions

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