SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternative to x.js for clientHeight?

    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.
    Last edited by ucahg; Sep 15, 2003 at 13:51.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ucahg,

    I guess I need to download Firebird

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

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I installed Firebird and I do see the effect you're describing. I'll have to look into it when I get time.

  4. #4
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, ucahg. I think this was a good fix.

  10. #10
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    Thanks a million, that fixed it!
    That's great! Thanks for your help with this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •