[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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 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 wrote:
> Hi T.J., that is odd... I get the same results for the width and height of
> the 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 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 wrote:
>> > Hi T.J., thanks for pointing me to document.viewport. It returns the
>> > dimensions of the element.
>> >
>> > - Paul K
>> >
>> > On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder
>> 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 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 <
>> 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:
>> >
>> > > > >
>> > > > > This is a test
>> > > > >
>> >
>> > > > > ...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 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;
>> > > > > > >
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J., that is odd... I get the same results for the width and height of
the 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 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 wrote:
> > Hi T.J., thanks for pointing me to document.viewport. It returns the
> > dimensions of the element.
> >
> > - Paul K
> >
> > On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder
> 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 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 <
> 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:
> >
> > > > >
> > > > > This is a test
> > > > >
> >
> > > > > ...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 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 (do
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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 wrote:
> Hi T.J., thanks for pointing me to document.viewport. It returns the
> dimensions of the element.
>
> - Paul K
>
> On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder 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 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
> > 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:
>
> > > >
> > > > This is a test
> > > >
>
> > > > ...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 wrote:
> > > > > Thank you, Douglas. Works like a charm!
>
> > > > > - Paul K
>
> > > > > On Tue, May 5, 2009 at 9:19 AM, Douglas
> > > > 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
> > wrote:
>
> > > > > > > Hi, I am unable to get the height of the tag using
> > > > > > > Element.getDimensions although I can get the width of the
> > tag
> > > > > > > fine. How can I get the height of the tag? I have my
> > simple
> > > > > > > code pasted athttp://pastie.org/468828. Here is the snippet of
> > code
> > > > > > > below as well:
>
> > > > > > > function alertBodyDim() {
> > > > > > > /* $('main'
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Hi T.J., thanks for pointing me to document.viewport. It returns the
dimensions of the element.
- Paul K
On Thu, May 7, 2009 at 1:21 AM, T.J. Crowder 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 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
> 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:
> >
> > >
> > > This is a test
> > >
> >
> > > ...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 wrote:
> > > > Thank you, Douglas. Works like a charm!
> >
> > > > - Paul K
> >
> > > > On Tue, May 5, 2009 at 9:19 AM, Douglas
> > > 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
> wrote:
> >
> > > > > > Hi, I am unable to get the height of the tag using
> > > > > > Element.getDimensions although I can get the width of the
> tag
> > > > > > fine. How can I get the height of the 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 */
> > > > > >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 sen
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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 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 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:
>
> >
> > This is a test
> >
>
> > ...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 wrote:
> > > Thank you, Douglas. Works like a charm!
>
> > > - Paul K
>
> > > On Tue, May 5, 2009 at 9:19 AM, Douglas
> > 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 wrote:
>
> > > > > Hi, I am unable to get the height of the tag using
> > > > > Element.getDimensions although I can get the width of the tag
> > > > > fine. How can I get the height of the 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 */
> > > > > 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-script
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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 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:
>
>
> This is a test
>
>
> ...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 wrote:
> > Thank you, Douglas. Works like a charm!
> >
> > - Paul K
> >
> > On Tue, May 5, 2009 at 9:19 AM, Douglas
> 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 wrote:
> >
> > > > Hi, I am unable to get the height of the tag using
> > > > Element.getDimensions although I can get the width of the tag
> > > > fine. How can I get the height of the 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 */
> > > >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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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:
This is a test
...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 wrote:
> Thank you, Douglas. Works like a charm!
>
> - Paul K
>
> On Tue, May 5, 2009 at 9:19 AM, Douglas 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 wrote:
>
> > > Hi, I am unable to get the height of the tag using
> > > Element.getDimensions although I can get the width of the tag
> > > fine. How can I get the height of the 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 */
> > > 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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
Thank you, Douglas. Works like a charm!
- Paul K
On Tue, May 5, 2009 at 9:19 AM, Douglas 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 wrote:
> >
> > Hi, I am unable to get the height of the tag using
> > Element.getDimensions although I can get the width of the tag
> > fine. How can I get the height of the tag? I have my simple
> > code pasted at http://pastie.org/468828. Here is the snippet of code
> > below as well:
> >
> > function alertBodyDim() {
> > /* $('main') refers to */
> >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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help! How to get document.body height using Element.getDimensions
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 wrote:
>
> Hi, I am unable to get the height of the tag using
> Element.getDimensions although I can get the width of the tag
> fine. How can I get the height of the tag? I have my simple
> code pasted at http://pastie.org/468828. Here is the snippet of code
> below as well:
>
> function alertBodyDim() {
> /* $('main') refers to */
> 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
-~--~~~~--~~--~--~---
