FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Page Height And Width

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


garionw
I am wondering if anyone is able to write me a javascript (I will pay big FRIH$ for it) that will output the viewers height and width of the browser

Here is the existing one that I have currently:
Code:

<SCRIPT>
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth-64;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth-64;
  winH = document.body.offsetHeight;
 }
}

document.write("Window width = " + winW + "<br>");
document.write("Window height = " + winH + "<br>");
document.write("<img src=image1.png width=" + winW + " />");
</SCRIPT>


I tried to use that with Internet Explorer 5.5 (Included with Windows 2000) the other night and I got and undefined error (Line 4, I think Wink )

If anyone can get this to work with IE 5.5 Ill pay them and for bonus FRIH$: make the script automaticly update whenever I resize the screen

Last edited by garionw on Tue Sep 26, 2006 8:29 am; edited 1 time in total
Kaneda
You can't pay "big FRIH$ with F$240 Wink Well, depends on your definition of big, I guess...

Anyway, you shouldn't rely on browser detection if you can avoid it - and you can in this case. Seems you actually want the width/height of the client area, not the entire browser window. So:

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function getWindowDimensions() {
  var result = new Object();
  if (self.innerWidth) // Mozilla, Netscape, Safari, Opera etc.
  {
    result.width = self.innerWidth;
    result.height = self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth)
  // Explorer 6 Standards
 {
    result.width = document.documentElement.clientWidth;
    result.height = document.documentElement.clientHeight;
  }
  else if (document.body) // Explorer 5.5- and Explorer 6 Quirks
  {
    result.width = document.body.clientWidth;
    result.height = document.body.clientHeight;
  }
  return result;
}

window.onresize = function() {
  var dims = getWindowDimensions();
  // Now we have width and height in dims.width and dims.height properties.
  // Do what you need to do... Here we output the result (avoid using document.write for such):
  document.getElementById("result").innerHTML = "width: " + dims.width + ", height: " + dims.height;
}
</script>
</head>
<body>
  <p id="result"></p>
</body>
</html>


No version of IE so far supports innerHeight, so if that property exists, we'll use it, otherwise, we check for document.documentElement, which only exists in IE6 Standards Mode. If that doesn't work, we'll use document.body, which works in all versions of IE (doesn't give the right value in IE 6 Strict Mode, but we're using document.documentElement for that anyway).

To get a function called whenever the window resizes, we use onresize. Note that in Mozilla, unlike IE, this only gets called when you release the mouse button after a resize, not while you're dragging to resize.

No idea why you're subtracting 64, though. Smile

Tested in IE6 Quirks, IE6 Standards and Firefox 1.5.0.7. Should work on just about any browser in existance.

Note that it won't display anything until you resize, since we only assign the event handler to window.onresize. To make it work when it first loads, you'd obviously assign the handler to window.onload too (or better, use the proper way of assigning event handlers Wink)
bnbrown
Google Analytics http://google.com/analytics

It shows the users screen resolution automatically.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.