Hi T.J.,
Thanks for the clear explanation regarding the viewport's height. I did
expect the body element's height to be the viewport's height and I was wrong
to make that assumption. Since Prototype javascript library seems to iron
out various cross-browser implementations of native javascript (Internet
Explorer in particular), I thought there was a simple method in Prototype
that could easily determine the body element's width and height.
- Paul K
On Wed, May 6, 2009 at 2:05 AM, T.J. Crowder <t...@crowdersoftware.com> wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
