[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

innerHeight not calculating properly

Posted on 2004-11-08
9
Medium Priority
?
723 Views
Last Modified: 2008-03-17
I am using the following code to resize a div layer to the inner dimensions of the browser, the width works fine but the height is calculating at 133px, no matter what the resolution.  Any suggestions?
<style type="text/css">
#surveydiv
{
      position:absolute;
      top:0;
      left:0;
      background-color: #CC0033;
      border: solid 2px black;
      z-index: 10;

}
</style>
<div id="surveydiv">
</div>
<script type="text/javascript">
      var ns=(document.layers);
      var ie=(document.all);
      var w3=(document.getElementById && !ie);
function sizesurvey()
{
      if(ie)            adDiv=eval('document.all.surveydiv.style');
      else if(ns)      adDiv=eval('document.layers["surveydiv"]');
      else if(w3)      adDiv=eval('document.getElementById("surveydiv").style');
      if (ie){documentWidth=document.body.offsetWidth-4;
      documentHeight=document.body.offsetHeight;}      
      else if (ns){documentWidth=window.innerWidth;
      documentHeight=window.innerHeight;}
      else if (w3){documentWidth=self.innerWidth;
      documentHeight=self.innerHeight;}
      
      adDiv.width = documentWidth;
      adDiv.height = documentHeight;
      alert(documentHeight);
}
</script>
0
Comment
Question by:earthman100
9 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 12528932
Change the div to this:

<div id="surveydiv">&nbsp;</div>

0
 

Author Comment

by:earthman100
ID: 12528958
I have entered content in the div and the height still does not change.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 12528965
In Mozilla you have to add <body>

<style type="text/css">
#surveydiv
{
     position:absolute;
     top:0;
     left:0;
     background-color: #CC0033;
     border: solid 2px black;
     z-index: 10;

}
</style>
<body><div id="surveydiv"></body>
&nbsp;</div>
<script type="text/javascript">
     var ns=(document.layers);
     var ie=(document.all);
     var w3=(document.getElementById && !ie);
function sizesurvey()
{
     if(w3)          adDiv=eval('document.getElementById("surveydiv").style');
     else if(ns)     adDiv=eval('document.layers["surveydiv"]');
     else if(ie)     adDiv=eval('document.all.surveydiv.style');

     if (w3){documentWidth=self.innerWidth;
             documentHeight=self.innerHeight;}
     else if (ns){documentWidth=window.innerWidth;
                  documentHeight=window.innerHeight;}
     else if (ie){documentWidth=document.body.offsetWidth-4;
                  documentHeight=document.body.offsetHeight;}    

     adDiv.width = documentWidth;
     adDiv.height = documentHeight;
     alert(documentHeight);
}

sizesurvey()
</script>


0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12528972
Sorry, body was messed, but it worked then.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12528977
With <body> it works also like this:

<body><div id="surveydiv"></div></body>

0
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 600 total points
ID: 12529051
<script>
function sizesurvey(){
 documentHeight=(window.innerHeight || self.innerHeight || document.body.offsetHeight)
 documentWidth=(window.innerWidth || self.innerWidth || document.body.offsetWidth)
 alert(documentHeight+' '+documentWidth)
}
</script>

<body onload="sizesurvey()">

</body>
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 12529122
You are setting a style attribute.  For standards compliant browsers (which use innerHeight) you have to include the unit of measure.  Width defaults to 100% for a block element anyway so it is only height that is a problem.  Make the code standards compliant by changing

    adDiv.height = documentHeight;
to
    adDiv.height = documentHeight+'px';

Cd&
0
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 600 total points
ID: 12529721
eg

<script>
function sizesurvey(){
 documentHeight=(window.innerHeight || self.innerHeight || document.body.offsetHeight-50)
 documentWidth=(window.innerWidth || self.innerWidth || document.body.offsetWidth-50)
 document.getElementById('d1').style.height=documentHeight
 document.getElementById('d1').style.width=documentWidth
}
</script>

<body>
 <div id="d1" style="background:yellow;height:200;width:400">
   <input type="button" value="Adjust Div" onclick="sizesurvey()">
 </div>
</body>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13582022
Hello earthman100,
you have 10 questions still open.
Do you need more support in this particular question?
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

830 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