...

View Full Version : Getting the browser window size



evilguru
04-17-2005, 11:28 AM
Hi, this will probably make a bit more sense it you read my topic in the HTML section (http://www.codingforums.com/showthread.php?t=57093) where I had a problem with two floating divs, in the end the solution was to give both on my floating divs a fixed width. Now, the menu bar div will always be 150 pixels and i wanted the remaing width to be taken up by the main content div.

This script here seems to work very wel in firefox but in ie I get scrollbars. This seems to be because firefox returns the actuall width of the viewing 'frame' while IE seems to give the width of the window itself.


<script type="text/javascript">
onload = function getBrowserWidth() {
if (!document.all) {
var width = document.body.offsetWidth;
var newWidth = width - 150;
document.getElementById('main').style.width = newWidth;
}
}
</script>

After a bit of playing with it I found that IE seems to return in offsetWidth about 19 more pixels than the actual size of the viewable 'frame', can anyone confirm this?
Now, when the browser window is resized I want the width of the element to be resized as well, which meant I had to add to the body tag <body onresize="getBrowserWidth();"> is there a better way to attach the function to when the window is resized?
I am not sure how Opera and Safari return offsetWidth and if they do it like mozilla, or need special values like IE does to make it fit.

Thanks for all of your help with any of these 'mini' questions :D

Mr J
04-17-2005, 02:44 PM
It can get a bit confusing with the different browsers but if you run the following script in all your browsers you will see what each returns.




<script type="text/javascript">
<!--

function info(){
str="<ul>"

if(document.body.clientWidth){
str+="<li>document.body.clientWidth = "+document.body.clientWidth
str+="<li>document.body.clientHeight = "+ document.body.clientHeight
}
if(document.body.offsetWidth){
str+="<li>document.body.offsetWidth = "+document.body.offsetWidth
str+="<li>document.body.offsetHeight = "+document.body.offsetHeight
}
if(window.innerWidth){
str+="<li>Window.innerWidth = "+window.innerWidth
str+="<li>Window.innerHeight = "+window.innerHeight
}
if(window.outerWidth){
str+="<li>Window.outerWidth = "+window.outerWidth
str+="<li>Window.outerHeight = "+window.outerHeight
}
if(document.getElementsByTagName){
str+="<li>document.getElementsByTagName('body')[0].offsetWidth = "+document.getElementsByTagName('body')[0].offsetWidth
str+="<li>document.getElementsByTagName('body')[0].offsetHeight = "+document.getElementsByTagName('body')[0].offsetHeight
}
if(document.documentElement){
str+="<li>document.documentElement.offsetWidth = "+document.documentElement.offsetWidth
str+="<li>document.documentElement.offsetHeight = "+document.documentElement.offsetHeight
}

document.getElementById("display2").innerHTML=str

}
setTimeout("info()",200)
//-->
</script>

<P>The following examples and may vary depending on which browser you are using to view this page.
<P><center>
<table border="0" width="80%">
<tr valign="top">
<td id="display2" width="50%"></td>
</tr>
</table>

Vladdy
04-17-2005, 04:01 PM
Also, available properties with window size information depend not only on the browser, but DOCTYPE as well (or more accurately whether the browser is in "quirks" mode or not)

evilguru
04-17-2005, 04:46 PM
You, sir have to be one of the greatest forum members ever!

The result from it in IE were:

document.body.clientWidth = 1050
document.body.clientHeight = 820
document.body.offsetWidth = 1069
document.body.offsetHeight = 824
document.getElementsByTagName('body')[0].offsetWidth = 1069
document.getElementsByTagName('body')[0].offsetHeight = 824
document.documentElement.offsetWidth = 1069
document.documentElement.offsetHeight = 824

Note that the clientWidth is 19px lower than the others and 19px is what my testing showed was the 'viewable frame' area. From this I will keep with clientWidth (if it is the most correct DOM wise) as it gives the correct value for both IE and Firefox (I do not have opera or a mac, so I can not test safari or opera).
Does anyone know a better way of calling the function when the window is resized other than '<body onresize="function()">?
Thanks a million

Mr J
04-17-2005, 05:09 PM
You could try adding

onresize=functionName

to the end of your script.

Not sure if this reacts differently to being called from the body tag

evilguru
04-17-2005, 06:52 PM
Thanks.
The current script works almost perfectly but I have a couple of things I want to clear up first:)


<script type="text/javascript">
onload = onresize = function mainWidth () {
var width = document.body.clientWidth;
var mainWidth = width - 166;
document.getElementById('main').style.width = mainWidth;
}
</script>
In IE this script works fine, and as you resize the browser window the 'main' content div does as well. However firefox waits until you have finished picking your new browser window size before calling the function. It seems that while IE regesters onresize events as you move and 'nodes' around firefox only does it when you have finished. This can cause the site to look a bit distorted while you are moving it about. I am sure I read somewhere that there was a fix for this, however I am not sure what it was, if anyone knows please tell me.

I have also read that opera does not support onresize is this correct? If so, is there another method of doing this? Thanks for all of your help.

kavit
01-03-2010, 05:51 PM
i need to knw if this is right and how can i set offsetWidth for my flag.. and its stop button doesnot work the way it should.. when i click on start it speed increas but then my flag doesnot stop ny help:confused:
<script language="JavaScript" type="text/javascript">
<!--
function flagMove() {
var obj = document.getElementById('float');
if (!obj) return false;
var leftPos = parseInt(obj.style.left);
leftPos += direction;
if (leftPos < 0) {
direction = -direction;
leftPos = 0;
} else if (leftPos > 750) {
direction = -direction;
leftPos = 750;

}
obj.style.left = leftPos + 'px';
}
function Move() {
direction = 1;//can change the speed
delay = 10; // can make it slow
flagMoveInterval = window.setInterval('flagMove();',delay);
}

//-->

</script>
</head>
<body onload="Move();">
<h1>The Flag of <a href="http://en.wikipedia.org/wiki/Honduras">HONDURAS</a> by KAVITA RAWAT (K0847674)</h1>

<div id="float" style="left:400px;">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>

<div id = "button"><input type="button" value="Start!" onclick="Move()"/>
<input type="button" value="Stop!" onclick="window.clearInterval(flagMoveInterval)"/></div>

onejab
01-04-2010, 11:00 AM
hmm this is very interesting. msn is always just a little bit larger when it comes to objects.

chrisglasier
01-04-2010, 11:59 AM
Does anyone know a better way of calling the function when the window is resized other than '<body onresize="function()">?


Try this for size (http://bytes.com/topic/javascript/answers/430012-body-onresize-vs-window-onresize?) (or resize i suppose)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum