Solved

Div to resize on window resize

Posted on 2006-07-07
7
4,010 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
  • 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 500 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now