return client height / width.

rlemon · 01-18-2006, 09:01 PM

i need the innerHeight and innerWidth of the clients browser window to be returned from a function.

here is what i have however some times the value being returned is in fact greater than the browser window (only by a few pixles) i'm assuming this has something to do with 'tabs' in my browser.

Code:

function getW(){
var w;
if(document.innerWidth){ w=document.innerWidth;
} else if(document.documentElement.clientWidth){ w=document.documentElement.clientWidth;
} else if(document.body){ w=document.body.clientWidth; }
return w;
}
function getH(){
var h;
if(document.innerHeight){ h=document.innerHeight;
} else if(document.documentElement.clientHeight){ h=document.documentElement.clientHeight;
} else if(document.body){ h=document.body.clientHeight; }
return h;
}

Edit:
i'm returning the value into a Math.random()*getH();
i'm using the value from that to randomly position a single character on the page.
hope that helps :S

_Aerospace_Eng_ · 01-18-2006, 09:25 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
text-align:center;
}
</style>
<script type="text/javascript">
<!--
function getW(){
var w;
if(document.innerWidth){ w=document.innerWidth;
} else if(document.documentElement.clientWidth){ w=document.documentElement.clientWidth;
} else if(document.body){ w=document.body.clientWidth; }
return w;
}
function getH(){
var h;
if(document.innerHeight){ h=document.innerHeight;
} else if(document.documentElement.clientHeight){ h=document.documentElement.clientHeight;
} else if(document.body){ h=document.body.clientHeight; }
return h;
}
function showMe(){
alert(getH());
alert(getW());
}
//-->
</script>
</head>

<body>
<form action="#" method="post">
<div>
<input type="button" onclick="showMe()" value="Show Me">
</div>
</form>
</body>
</html>

It seems to be returning correctly. IE does have a border on the body so you need to set that to 0 as well. You may want to get this FF extension called MeasureIt which allows you to draw out a ruler in your FF browser. I've attached an SS with an alert and the Ruler drawn. They seem to match.

rlemon · 01-18-2006, 09:38 PM

Quote:

Originally Posted by _Aerospace_Eng_

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
text-align:center;
}
</style>
<script type="text/javascript">
<!--
function getW(){
var w;
if(document.innerWidth){ w=document.innerWidth;
} else if(document.documentElement.clientWidth){ w=document.documentElement.clientWidth;
} else if(document.body){ w=document.body.clientWidth; }
return w;
}
function getH(){
var h;
if(document.innerHeight){ h=document.innerHeight;
} else if(document.documentElement.clientHeight){ h=document.documentElement.clientHeight;
} else if(document.body){ h=document.body.clientHeight; }
return h;
}
function showMe(){
alert(getH());
alert(getW());
}
//-->
</script>
</head>

<body>
<form action="#" method="post">
<div>
<input type="button" onclick="showMe()" value="Show Me">
</div>
</form>
</body>
</html>

It seems to be returning correctly. IE does have a border on the body so you need to set that to 0 as well. You may want to get this FF extension called MeasureIt which allows you to draw out a ruler in your FF browser. I've attached an SS with an alert and the Ruler drawn. They seem to match.

ok, that looks nice - however it's still not working for me.

http://rlemon.com/assassins/test <-- characters are randomly scattered on the page - reload a couple times with the browser NOT maximized and you'll see scrollbars occasionally.