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
Solved

Div to resize on window resize

Posted on 2006-07-07
7
4,018 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Add or delete table rows 10 54
how can i turn the array into an object 4 46
HowTo set a global variable in javascript or jQuery 4 22
Html Newline 7 21
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

839 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