• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4042
  • Last Modified:

Div to resize on window resize

I am trying to make a two columnar layout using divs. What I wanted was:

1. When user resizes a window (manual resize), It should check the body width and adjust the div widths with these specification

a. if the body width<800 then

left div width =200
right div width=900
header=left+right div's width

else

left div=20%
right div=79%
header=100%

I am trying it, here is the code but not workin, any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
      <script language="javascript">
            function fittheDivs(){
                  if(document.body.clientWidth<800){
                        document.getElementById('header').style.width="800px";
                        document.getElementById('left').style.width="200px";
                        document.getElementById('right').style.width="600px";
                        document.getElementById('left').style.position="absolute";
                        document.getElementById('right').style.position="relative";
                        document.getElementById('right').style.left=0;

                  }else{
                        //alert(document.getElementById('left').style.width);
                        document.getElementById('header').style.width="100%";
                        document.getElementById('right').style.width="79%";
                        document.getElementById('left').style.width="20%";
                        document.getElementById('right').style.left=0;
                        document.getElementById('left').style.position="absolute";
                        document.getElementById('right').style.position="relative";
                  }
            }
      </script>
</head>

<body onresize="fittheDivs();">
<div  id="header" style="display:block;float:none;width:100%;border: 1 solid #000000;">
      header
</div>
<br>
<div id="left" style="position:absolute;float:left;width:20%;border: 1 solid #000000;">
      left nav
</div>
<div id="right" style="position:relative;float:right;width:79%;border: 1 solid #000000;">
      left nav
</div>
</body>
</html>
0
gops1
Asked:
gops1
  • 3
  • 3
1 Solution
 
ZvonkoSystems architectCommented:
That is better done without script but with table and image:

<table width="100%" >
<tr><td colspan="2">
<div  id="header" style="display:block;float:none;width:100%;border: 1 solid #000000;">
     header
</div>
</td></tr>
</tr>
<tr><td width="40%"  style="v-align:top;">
<div  style="border: 1 solid #000000;">
     left nav
</div>
<img height="1" width="200px">
</td><td style="v-align:top;">
<div style="border: 1 solid #000000;">
     left nav
</div>
<br>
</td></tr>
</table>



0
 
gops1Author Commented:
I cannot use tables here I am supposed to use only DIVs
0
 
iamanindianCommented:
Not too sure whether this solution will serve your requirement or not...but apparently...this is pretty close:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21901820.html

Regards
WC
0
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.

 
gops1Author Commented:
To some extent YES your code is great but the problem what I have is if you resize the window and when the width of the window reaches below 800 then it should not further reduce its size. The size of the DIVs should get fixed
0
 
iamanindianCommented:
Well..that will be some tewaking of that code (of the link I placed). Right now I have to run...but if I manage time over the next 8-10 hrs, I will try to make the changes & put it.

Regards
WC

0
 
iamanindianCommented:
Ok...I have tried a little tweak as per ur requirement. Thisnk this should give you the head start.
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Solutions2Day.com</title>
<script language="JavaScript" type="text/javascript">
<!--
function setWidth(){
                        var screenWidth;
                        var dleft_width;
                        var defaultWidth=779;
                        var dright_width=200;      //putting a sample width
        if (window.innerWidth) {
                                screenWidth=window.innerWidth;
        }
                        else if (document.body.clientWidth) {
                     screenWidth=document.body.clientWidth;
        }
                        else {
                     screenWidth=defaultWidth; //i.e. unable to capture the screen width
        }
            
            if(screenWidth<800){
                  dleft_width=200;
                  dright_width=900;
            }
            else{
                  dleft_width=screenWidth*.20;
                  dright_width=screenWidth*.79;
            }
//                        var dleft_width=screenWidth-dright_width;
                        document.getElementById("dright").style.width=dright_width;
                        document.getElementById("dright").style.left=dleft_width;
                        document.getElementById("dleft").style.width=dleft_width;                        
                        
}
//-->
</script>
<style type="text/css">
<!--
#dleft{
      position: absolute;
      top: 0px;
      left: 0px;
      height:75px;
      width: 50%;
      border: 1px solid black;      
      background-color:green;
}      
#dright{
      position: absolute;
      top: 0px;
      left: 0px;
      height:75px;
      width: 50%;            
      border: 1px solid black;      
      background-color:red;
}

-->
</style>

</head>
<body onLoad="setWidth()" onResize="setWidth()">
<div id="dleft">
</div>
<div id="dright">
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------

Regards
WC

PS: Please note...I just tweaked the earlier code...so played with just left & right DIVs...didn't use any headers. That shouldn't be a problem.
0
 
gops1Author Commented:
Thanks a lot jaman, I guess I can move ahead from where you have left.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now