?
Solved

Div to resize on window resize

Posted on 2006-07-07
7
Medium Priority
?
4,037 Views
Last Modified: 2008-01-09
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
Comment
Question by:gops1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 17061827
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
 
LVL 17

Author Comment

by:gops1
ID: 17066822
I cannot use tables here I am supposed to use only DIVs
0
 
LVL 10

Expert Comment

by:iamanindian
ID: 17089436
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
Technology Partners: 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!

 
LVL 17

Author Comment

by:gops1
ID: 17089810
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
 
LVL 10

Expert Comment

by:iamanindian
ID: 17090628
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
 
LVL 10

Accepted Solution

by:
iamanindian earned 2000 total points
ID: 17106109
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
 
LVL 17

Author Comment

by:gops1
ID: 17107078
Thanks a lot jaman, I guess I can move ahead from where you have left.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

649 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