?
Solved

Constrain proportions

Posted on 2011-10-06
1
Medium Priority
?
438 Views
Last Modified: 2012-05-12
Hi!

I have placed a div that are centered on a page with a given margin, if the window resize i want the div to change in constrain proportions. Is this possible? And how?

The size of div should be 1280x800px. (Ratio 1,6)

The document.getElementById want work...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TEST DYNAMIC SWF/DIV</title>
<script type="text/javascript">
<!--
       var WindowWidth;
       var WindowHeight;
       var swfHeight;
       var swfWidth;
       var swfHalfHeight;
       var swfRatio;
       var swfMargin;
      
      
       // Check window size start
       // ------------------------------------------------------------------------------
       // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
       if (typeof window.innerWidth != 'undefined')
       {
              WindowWidth = window.innerWidth,
              WindowHeight = window.innerHeight
       }
        
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
       else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
       {
               WindowWidth = document.documentElement.clientWidth,
               WindowHeight = document.documentElement.clientHeight
       }
        
       // older versions of IE
       else
       {
               WindowWidth = document.getElementsByTagName('body')[0].clientWidth,
               WindowHeight = document.getElementsByTagName('body')[0].clientHeight
       }
       // ------------------------------------------------------------------------------
       // Check window size end

 
      // Check flash ratio size start
      // ------------------------------------------------------------------------------  
      // give the flash correct size depend on window width..
      if (WindowWidth>=1681)
        {
            //1920x1200 (1132x800)
            swfWidth = "1280";
            swfHeight = swfWidth / 1.6;
            swfWidth = Math.round(swfWidth);
            swfHeight = Math.round(swfHeight);
            //swfHeight="800";
            //swfWidth="1280";
            swfHalfHeight = -swfHalfHeight;
            swfHalfHeight = Math.round(swfHalfHeight=swfHeight/2  );
            swfRatio = swfWidth/swfHeight;
        }
      else
        {
            swfMargin = "200";
            //Tilgjengelig plass
            swfWidth = WindowWidth - swfMargin;
            swfHeight = swfWidth / 1.6;
            swfWidth = Math.round(swfWidth);
            swfHeight = Math.round(swfHeight);
            //swfHeight="800";
            //swfWidth="1280";
            swfHalfHeight = -swfHalfHeight;
            swfHalfHeight = Math.round(swfHalfHeight=swfHeight/2  );
            swfRatio = swfWidth/swfHeight;
        }
      // ------------------------------------------------------------------------------    
      // Check flash size end
      
      // Update the css style with given value.
      document.getElementById('distance').style.marginBottom = swfHalfHeight;
      document.getElementById('container').style.height = swfHeight;
      document.sgetElementById('container').style.width = swfWidth;
 //-->
</SCRIPT>

<style type="text/css">
      * {
            margin:0;
            padding:0;
            }

      html, body {
            height:100%;
            }

      body {
            background-color:#cccccc;
            color:#630;
            font:100.01%/1.4 sans-serif;
            text-align:center; /* horizontal centering for IE Win quirks */
            }

      #distance {
            width:1px;
            height:50%;
            background-color:#cccccc;
            margin-bottom:-400px; /* half of container's height */
            float:left;
            }

      #container {
            margin:0 auto;
            position:relative; /* puts container in front of distance */
            text-align:left;
            height:800px;
            width:1280px;
            clear:left;
            background-color:#cccccc;
            border:1px solid #000000;
            border-top-color:#000000;
            border-left-color:#000000;
            }

      #container div {
            font-size:80%;
            float:right;
            width:17em;
            margin-left:2em;
            }
</style>
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>

      <div id="distance"></div>
      <div id="container">
            <center>
            <script type="text/javascript">
            document.write('Vindu bredde er: '+WindowWidth+'<br>');
            document.write('Vindu høyde er: '+WindowHeight+'<br>');
            document.write('Flash bredde er: '+swfWidth+'<br>');                  
            document.write('Flash høyde er: '+swfHeight+'<br>');
            document.write('Flash margin er: '+swfHalfHeight+'<br>');
            document.write('Ratio er: '+swfRatio+'<br>');
            document.write('Margin er: '+swfMargin+'<br>');
            </script>
            </center>
      </div>

</body>
</html>
0
Comment
Question by:myhrvold
1 Comment
 
LVL 22

Accepted Solution

by:
Mrunal earned 2000 total points
ID: 36968807
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question