• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4046
  • 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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