Alternative to x.js for clientHeight?

**ucahg** · Sep 13, 2003 09:14

I am using the x.js library, and one of the things I'm using it for is to determine the client height and resize layers accordingly. However, in Mozilla Firebird 0.6, the client height is first returned as the height of the document, and then slowly "crawls" up to the actual value.

You can see my page here:
http://24.141.194.248/index.new.html

Internet Explorer correctly identifies the height of the client immediately (an inserted alert has proven this) while Mozilla detects the height as the height of the document, and then ramps up to the height of the actual page.

Actually it almost seems to be a browser bug, because I figure it's firing the resize event each time (which causes the divs to slowly expand to the full window), and that doesn't seem to be a script bug really.

But what I'm looking for (if no one can explain this) is a different method of detecting the client height in a cross-browser manner.

Thanks in advance,

Edit:

Hmm, it works here though: http://24.141.194.248/test-resize.html
I must be doing something wrong then, but for the life of me I can't figure it out.

Edit:

Fixed links, sorry about that.

**MikeFoster** · Sep 15, 2003 06:33

Hi ucahg,

I guess I need to download Firebird

Your two links don't work for me. I'll try them again later.

**MikeFoster** · Sep 15, 2003 07:45

I installed Firebird and I do see the effect you're describing. I'll have to look into it when I get time.

**ucahg** · Sep 15, 2003 16:36

After some experimentation, I've isolated the problem down to this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="scripts/x.js" type="text/javascript">
</script>

<script type="text/javascript">
window.onload = function()
{
	alert("xClientHeight:\t" + xClientHeight() + "\n" + 
		  "xHeight(body):\t" + xHeight("body") + "\n" + 
		  "xHeight(html):\t" + xHeight(document.getElementsByTagName("html")[0]) + "\n" +
		  "xHeight(div):\t" + xHeight("div") + "\n");
    alert("window.innerHeight:\t" + window.innerHeight + "\n" +
	      "document.documentElement.clientHeight:\t" + document.documentElement.clientHeight + "\n" +
		  "document.body.clientHeight:\t" + document.body.clientHeight + "\n" +
		  "window.innerHeight:\t" + window.innerHeight + "\n" +
		  "window.innerHeight-16:\t" + (window.innerHeight-16));
}
</script>
</head>

<body id="body">
<div id="div">Hi there!</div>
</body>

</html>

See it in action here: http://24.141.194.248/test-js.html

My two alerts can clearly explain what is going on. The first displays the heights of various items, and the second displays the values of the various methods used in xClientHeight() to get the client height.

It seems MozillaFirebird should be using one of the other methods of detecting the height as opposed to document.innerHeight (which it seems to be using now). Perhaps changing a conditional in the x script so it will go under one of the previous ones would work.

By the way, the crawling that occured seemed to happen because I was detecting the maximum height as one pixel less than the xClientHeight (why it was one less I do not know), but this kept incrementing the maxHeight to the xClientHeight, which in turn incremented the xClientHeight (why again I don't know), which caused the page to crawl to the bottom.

**MikeFoster** · Sep 15, 2003 23:52

For Firebird, xClientHeight() returns document.body.clientHeight:

Code:

01 function xClientHeight() {
02   var h=0;
03   if(xOp5or6) h=window.innerHeight;
04   else if(xIE4Up && document.documentElement && document.documentElement.clientHeight)
05     h=document.documentElement.clientHeight;
06   else if(document.body && document.body.clientHeight)
07     h=document.body.clientHeight;
08   else if(xDef(window.innerWidth,window.innerHeight,document.width)) {
09     h=window.innerHeight;
10     if(document.width>window.innerWidth) h-=16;
11   }
12   return h;
13 }

I ran a similar test. The results are below. In regards to its use of document.body.clientHeight and document.documentElement.clientHeight Firebird is consistent with IE - but not with Mozilla. You can see on line 4 how I had to handle this for IE. Is Firebird going to make us sniff it too? Sheesh!

I still need to do a little searching to see if this is considered a bug.

mozilla/5.0 (windows; u; win98; en-us; rv:1.5a) gecko/20030728 mozilla firebird/0.6.1

xhtml doctype

document.width: 624
window.innerWidth: 639
document.body.clientWidth: 624
document.documentElement.clientWidth: 624
document.height: 739
window.innerHeight: 379
document.body.clientHeight: 739
document.documentElement.clientHeight: 364

no doctype

document.width: 624
window.innerWidth: 639
document.body.clientWidth: 624
document.documentElement.clientWidth: 0
document.height: 739
window.innerHeight: 379
document.body.clientHeight: 364
document.documentElement.clientHeight: 0

mozilla/5.0 (windows; u; win98; en-us; rv:1.4) gecko/20030624

xhtml doctype

document.width: 623
window.innerWidth: 638
document.body.clientWidth: 623
document.documentElement.clientWidth: 0
document.height: 739
window.innerHeight: 378
document.body.clientHeight: 363
document.documentElement.clientHeight: 0

no doctype

document.width: 623
window.innerWidth: 638
document.body.clientWidth: 623
document.documentElement.clientWidth: 0
document.height: 739
window.innerHeight: 378
document.body.clientHeight: 363
document.documentElement.clientHeight: 0

opera/7.11 (windows 98; u) [en]

xhtml doctype

window.innerWidth: 613
document.body.clientWidth: 598
document.documentElement.clientWidth: 598
window.innerHeight: 368
document.body.clientHeight: 353
document.documentElement.clientHeight: 764

no doctype

window.innerWidth: 613
document.body.clientWidth: 598
document.documentElement.clientWidth: 598
window.innerHeight: 368
document.body.clientHeight: 353
document.documentElement.clientHeight: 764

mozilla/4.0 (compatible; msie 6.0; windows 98)

xhtml doctype

document.body.clientWidth: 661
document.documentElement.clientWidth: 620
document.body.clientHeight: 740
document.documentElement.clientHeight: 336

no doctype

document.body.clientWidth: 620
document.documentElement.clientWidth: 0
document.body.clientHeight: 336
document.documentElement.clientHeight: 0

**MikeFoster** · Sep 16, 2003 06:46

Here's a change to X that may be an easy way to accomodate this issue. I've tested this (only a little) on the above browsers - it seems to work ok. In fact I think it's a better solution than I had before (has a little less browser-detection).

My algorithm depends on the fact that document.documentElement.clientHeight/clientWidth are zero when in 'quirks mode'. This is now true for IE6 and Firebird. It is not true for Opera7. For Mozilla they seem to be zero no matter what the mode but this needs more testing.

For those of you that are using X, I'd really appreciate it if you could help me test this a little. Just copy the following and paste it over the original functions in x.js.

Code:

function xClientWidth() {
  var w=0;
  if(xOp5or6) w=window.innerWidth;
//  else if(xIE4Up && document.documentElement && document.documentElement.clientWidth)
  else if(!window.opera && document.documentElement && document.documentElement.clientWidth)
    w=document.documentElement.clientWidth;
  else if(document.body && document.body.clientWidth)
    w=document.body.clientWidth;
  else if(xDef(window.innerWidth,window.innerHeight,document.height)) {
    w=window.innerWidth;
    if(document.height>window.innerHeight) w-=16;
  }
  return w;
}
function xClientHeight() {
  var h=0;
  if(xOp5or6) h=window.innerHeight;
//  else if(xIE4Up && document.documentElement && document.documentElement.clientHeight)
  else if(!window.opera && document.documentElement && document.documentElement.clientHeight)
    h=document.documentElement.clientHeight;
  else if(document.body && document.body.clientHeight)
    h=document.body.clientHeight;
  else if(xDef(window.innerWidth,window.innerHeight,document.width)) {
    h=window.innerHeight;
    if(document.width>window.innerWidth) h-=16;
  }
  return h;
}

**MikeFoster** · Sep 16, 2003 07:26

Have a look here:

http://bugzilla.mozilla.org/show_bug.cgi?id=189112
http://bugzilla.mozilla.org/show_bug.cgi?id=156388

Evidently, what we're seeing in Firebird is what they consider a 'fix'. I guess it's ok - we know how to code around it. But I think it's insane that we go to a property of the BODY and/or HTML elements to get information about the Viewport. Shouldn't this be a property of DocumentView?

Oh well, what do I know.

**MikeFoster** · Sep 16, 2003 07:40

In moz, defaultView points to the window. This is logical. In fact, window.innerWidth/innerHeight may have been the most appropriate property for this to begin with! What do you think?

**MikeFoster** · Sep 16, 2003 10:20

Thanks for your help, ucahg. I think this was a good fix.

**ucahg** · Sep 17, 2003 11:57

Thanks a million, that fixed it!

I didn't reply right away because at first it wasn't working, but as I suspected it was a problem with my code (my CSS actually) that was causing everything not to be positioned properly, not the javascript modifying the positions.

**MikeFoster** · Sep 17, 2003 12:31

Originally Posted by ucahg

Thanks a million, that fixed it!

That's great! Thanks for your help with this.

User Tag List

Thread: Alternative to x.js for clientHeight?

Thread Tools

Display

Alternative to x.js for clientHeight?

Bookmarks

Bookmarks

Posting Permissions