Hi T.J., I'm sorry for any confusion, but I was trying to get the dimension of the browser window this whole time. I misunderstood the <body> element dimension as being the same thing as the browser window dimension.
- Paul K On Thu, May 7, 2009 at 10:02 AM, Paul Kim <[email protected]> wrote: > Hi T.J., that is odd... I get the same results for the width and height of > the <body> element using the code that Douglas gave me and Prototype's > document.viewport.getDimensions(). You can take a look at my code at > pastie.org: http://pastie.org/471309. I don't know if it makes any > difference, but I have tested the code on IE7, Firefox 3, Opera 9, and > Safari 3 on my Windows Vista operating system. > > - Paul > > > On Thu, May 7, 2009 at 9:54 AM, T.J. Crowder <[email protected]>wrote: > >> >> Hi Paul, >> >> Hmmm, that's not what it's documented to do. Looking at the code, >> it's clearly trying to give you the window dimensions, not the body >> element. Some browsers make that harder than others. :-) >> >> -- T.J. >> >> On May 7, 5:48 pm, Paul Kim <[email protected]> wrote: >> > Hi T.J., thanks for pointing me to document.viewport. It returns the >> > dimensions of the <body> element. >> > >> > - Paul K >> > >> > On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder <[email protected]> >> wrote: >> > >> > > 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 -~----------~----~----~----~------~----~------~--~---
