Hi Paul, > Thanks for the clear explanation regarding the viewport's height. I did > expect the body element's height to be the viewport's height...
You're not the first or only one to make that mistake. :-) > ...I thought there was a simple method in Prototype > that could easily determine the body element's width and height... There is, and you used it: getDimensions does that. It's just that the body's dimensions aren't what you thought they should be. (And again, you're not the only one, I think we've all been there.) If you haven't looked at document.viewport[1] yet, it may be worth a look, depending on what you're doing. [1] http://prototypejs.org/api/document/viewport HTH, -- T.J. Crowder tj / crowder software / com Independent Software Engineer, consulting services available On May 6, 8:46 pm, Paul Kim <[email protected]> wrote: > 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 <[email protected]> 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 <[email protected]> wrote: > > > Thank you, Douglas. Works like a charm! > > > > - Paul K > > > > On Tue, May 5, 2009 at 9:19 AM, Douglas <[email protected]> > > 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 <[email protected]> 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
