Hi Paul,

Just to add to that, I'm guessing the height was "wrong" because you
were expecting the body element's height to be the viewport's height.
The body element's height is determined by its content (barring CSS
rules to the contrary), not the height of the viewport.  Try this CSS:

body {
    border:           1px solid red;
}

...with this body:

<body>
<p>This is a test</p>
</body>

...and you'll see the red border around the (outside of the)
paragraph, not around the entire page viewport.  If you ask its
dimensions, you'll find the body is 40-50px high depending on your
font sizes, etc.  If you have lots of content in the body, such that
it fills or overfills the viewport, the red border is (of course)
around all of the content.

You were probably expecting the body to be at least the height of the
viewport, perhaps because some CSS rules are applied as if that were
true.  Add a background color, for instance:

body {
    border:           1px solid red;
    background-color: yellow;
}

...and the yellow background fills the viewport, even though the body
doesn't.

Fun, eh?
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

On May 5, 5:25 pm, Paul Kim <kimba...@gmail.com> wrote:
> Thank you, Douglas. Works like a charm!
>
> - Paul K
>
> On Tue, May 5, 2009 at 9:19 AM, Douglas <douglas.gont...@gmail.com> wrote:
>
> > I hope this snippet helps :o)
>
> > [code]
> >    var w = 0,
> >        h = 0;
>
> >    if (typeof(window.innerWidth) == 'number') {
> >        w = window.innerWidth;
> >        h = window.innerHeight;
> >    } else if (document.documentElement &&
> > (document.documentElement.clientWidth ||
>
> > document.documentElement.clientHeight))
> >    {
> >        //IE 6+ in 'standards compliant mode'
> >        w = document.documentElement.clientWidth;
> >        h = document.documentElement.clientHeight;
> >    } else if (document.body && (document.body.clientWidth ||
> >                                 document.body.clientHeight))
> >    {
> >        //IE 4 compatible
> >        w = document.body.clientWidth;
> >        h = document.body.clientHeight;
> >    }
> > [/code]
>
> > On Tue, May 5, 2009 at 1:14 PM, kimbaudi <kimba...@gmail.com> wrote:
>
> > > Hi, I am unable to get the height of the <body> tag using
> > > Element.getDimensions although I can get the width of the <body> tag
> > > fine. How can I get the height of the <body> tag? I have my simple
> > > code pasted athttp://pastie.org/468828. Here is the snippet of code
> > > below as well:
>
> > > function alertBodyDim() {
> > >       /* $('main') refers to <body id="main"> */
> > >        var dimensions = $('main').getDimensions();
> > >        alert(dimensions.width);
> > >        alert(dimensions.height);
>
> > > }
>
> > > - Paul K
>
> > --
> > Believe nothing, no matter where you read it, or who said it, no
> > matter if I have said it, unless it agrees with your own reason and
> > your own common sense. ~Buddha
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to