SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question autosizing div with correct ratio + min heights/widths

    hey all

    little puzzle for ya because i can't think anymore.

    so i have a div that is a minimum of 960px wide x 500px high with a minimum of 20px margin to the left + right of it. there should be no scroll bars unless you go under the minimum dimensions (including left + right margin). when you resize the window, the #main div should resize (in correct ratio). here is my attempt:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            function resizeFrame() {
              var windowWidth = $(window).width();
              var windowHeight = $(window).height();
              var docWidth = $(document).width();
              var docHeight = $(document).height();
              var minWidth = 960;
              var minHeight = 500;
              var headerAndFooter = $('#header').height() + $('#footer').height();
              if (windowHeight > (minHeight + headerAndFooter)) {
                var newHeight = windowHeight - headerAndFooter;
                $('#main').css('height',newHeight);
                var newWidth = newHeight / minHeight * minWidth;
                $('#main').css('width',newWidth);
              }
            }
            jQuery.event.add(window, "load", resizeFrame);
            jQuery.event.add(window, "resize", resizeFrame);
          });
        </script>
        <style type="text/css">
          html,body {background:#000;margin:0;width:100%;height:100%;text-align:center;}
          body, #header, #footer {min-width:1000px;}
          #header {background:red;width:100%;height:80px;}
          #wrap {background:blue;margin:0 20px;}
          #main {margin:0 auto;background:#fff;}
          #main, #wrap {min-width:960px;min-height:500px;}
          #footer {background:yellow;height:50px;}
        </style>
      </head>
      <body>
        <div id="header">header</div>
        <div id="wrap">
          <div id="main">resize this div with correct ratio</div>
        </div>
        <div id="footer">footer</div>
      </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can't edit first post but here is where it stands. only issue i'm running into is if you try and resize the width quickly.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            function resizeFrame() {
              var windowWidth = $(window).width();
              var windowHeight = $(window).height();
              var docWidth = $(document).width();
              var docHeight = $(document).height();
              var mainWidth = $('#main').width();
              var mainHeight = $('#main').height();
              var minWidth = 960;
              var minHeight = 500;
              var margin = 40;
              var headerAndFooter = $('#header').height() + $('#footer').height();
              
              function resizeWidth() {
                var newWidth = windowWidth - margin;
                $('#main').css('width',newWidth);
                var newHeight = newWidth / minWidth * minHeight;
                $('#main').css('height',newHeight);
                mainWidth = $('#main').width();
                mainHeight = $('#main').height();
              }
              
              function resizeHeight() {
                var newHeight = windowHeight - headerAndFooter;
                $('#main').css('height',newHeight);
                var newWidth = newHeight / minHeight * minWidth;
                $('#main').css('width',newWidth);
                mainWidth = $('#main').width();
                mainHeight = $('#main').height();
              }
              
              if (windowWidth >= docWidth) {
                resizeWidth();
              }
                        
              if (windowHeight < (mainHeight + headerAndFooter)) {
                resizeHeight();
              }
              
              $('#w-height span').html(windowHeight);
              $('#d-height span').html(docHeight);
              $('#m-height span').html(mainHeight);
              $('#w-width span').html(windowWidth);
              $('#d-width span').html(docWidth);
              $('#m-width span').html(mainWidth);
            }
            jQuery.event.add(window, "load", resizeFrame);
            jQuery.event.add(window, "resize", resizeFrame);
          });
        </script>
        <style type="text/css">
          html,body {background:#000;margin:0;width:100%;height:100%;text-align:center;min-width:1000px}
          #header {background:red;height:80px}
          #main {margin:0 auto;background:#fff;min-width:960px;min-height:500px;}
          #footer {background:yellow;height:50px;}
        </style>
      </head>
      <body>
        <div id="header">header</div>
        <div id="main">
          <div id="w-width">window width: <span></span></div>
          <div id="d-width">document width: <span></span></div>
          <div id="m-width">main width: <span></span></div>
          <br />
          <div id="w-height">window height: <span></span></div>
          <div id="d-height">document height: <span></span></div>
          <div id="m-height">main height: <span></span></div>
        </div>
        <div id="footer">footer</div>
      </body>
    </html>


Bookmarks

Posting Permissions

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