Jump to content

how to get page height and width?


christiecohen

Recommended Posts

Hi there, I'm having a similar problem.Right now I have a transparant image in a table that is supposed to resize to the height of the browser window. This is what I have right now:function resize() { document.getElementById("doorzichtig").height=screen.availHeight}The resize function is called for in the body tag of the page on the onresize and onload events. Problem is that now matter what I try the height is almost always vastly too large after resize. Does anyone have an idea of what I'm doing wrong?ThanksEdit: I'm using Firefox 1.0.7 as browser

Link to comment
Share on other sites

maybe something like this?function resize(){ var newHeight=screen.availHeight-50; // change 50 to whatever document.getElementById("doorzichtig").height=newHeight;}

Link to comment
Share on other sites

The problem seems to be that availHeight appears to a fixed height and doesn't update itself when you resize the browser window.I've been experimenting with the -xx thing, unfortuantely the idea is to have a small copyright text always be at the bottom of the page. If you do a -220 for example it makes the page scrollable, which is what I'm trying to avoid, and if you do -150 (for example) the little copyright blurb is floating more or less near the bottom of the page.Making the page unscrollable would fix it I guess but I'm working on a dreamweaver template so I'd like to have it as open-ended as possible.I am greatly impressed by the speedy reply though :)

Link to comment
Share on other sites

Table has no height attribute, use CSS height:document.getElementById("doorzichtig").style.height = screen.availHeight + 'px';edit:this one works fine with Opera, but not in Firefox;function resize(){var myBody = document.getElementsByTagName('body')[0];document.getElementById("doorzichtig").style.height = myBody.clientHeight + 'px';}

Link to comment
Share on other sites

The problem seems to be that availHeight appears to a fixed height and doesn't update itself when you resize the browser window.

Yeah availheight doesn't update itself when the window is resised, try these 2 for IE and Netscapewindow.innerHeightdocument.body.offsetHeightHere's an example, try resizing the window and you should see the values change.
<html><head>		<script language="JavaScript" type="text/javascript"><!--function check(){  if (navigator.appName=="Netscape")   {    document.getElementById('x').value=window.innerWidth;    document.getElementById('y').value=window.innerHeight;  }  if (navigator.appName.indexOf("Microsoft")!=-1)  {    document.getElementById('x').value=document.body.offsetWidth;    document.getElementById('y').value=document.body.offsetHeight;  }}</script></head><body onload="check()" onresize="check()">x: <input type="text" id="x" />y: <input type="text" id="y" /></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...