www.webdeveloper.com
Results 1 to 2 of 2

Thread: Dynamically Resizing Content

  1. #1
    Join Date
    Apr 2010
    Posts
    11

    Dynamically Resizing Content

    I have JavaScript. It work ok without strict mode, but with strict mode, it messes up. In IE8 it loops forever. In Firefox it doesn't seem to resize anything.

    I hope someone can help.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
       <head>
          <script language="javascript">
             if(document.addEventListener)
             {
                document.addEventListener("onload", resizeContentSection, false);
                document.addEventListener("onresize", resizeContentSection, false);
             }
    
             function resizeContentSection()
             {
                var nContentHeight = 250;
                var s1 = document.getElementById('branding_section');
                var s2 = document.getElementById('content_div_id');
                var s3 = document.getElementById('section_footer');
                if ( (s1) && (s2) && (s3))  //all sections there
                {
                   var screenHeight = parseInt(document.body.clientHeight, 10);
                   var topOfContent = parseInt(s2.offsetTop, 10) ;
                   var heightOfFooter = parseInt(s3.offsetHeight, 10);
    
                   nContentHeight = screenHeight - topOfContent - heightOfFooter;
                   if(nContentHeight>0)
                   {
                      window.status = "div height should be "+nContentHeight;
                      window.status = "clientHeight = " + document.body.clientHeight + " content offset = " + s2.offsetTop + " foot height = "+ s3.offsetHeight;
                    //window.status = "innerHeight = "+temp4+" document.body.clientHeight = "+temp5 +"  document.documentElement.clientHeight = "+temp6;
                    //window.status = "height = "+s2.style.height+" width = "+s2.style.width +"  count = "+count;
    
                      s2.style.height = nContentHeight + "px";
                   }
                }
    
                return;
             };
          </script>
       </head>
       <body onresize="resizeContentSection()" onload="resizeContentSection()">
             <div id="branding_section" style="margin: 0px; padding: 0px;">
                <p>This is a header</p>
             </div>
             <div id="content_div_id" style="border: black 1px solid; margin: 0px;padding: 0px;">
                      This is content
             </div>
             <div id="section_footer" style="margin: 0px;padding: 0px;">
             <p>This is a footer</p>
             </div>
       </body>
    </html>

    The idea is to resize the content section.

    Thanks,
    Grae

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    If you are not a complete noob?, you can work with this
    massive code... http://www.webdeveloper.com/forum/sh...35&postcount=9

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles