Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to get this height info? Impossible?

Reply
Thread Tools

How to get this height info? Impossible?

 
 
Martin Honnen
Guest
Posts: n/a
 
      10-25-2003


Paul wrote:

> Hi,
> I'm wondering if someone out there can help me overcome this quandary.
> I need to be able to calculate the height of the current page. I need to
> calculate the height of the page in pixels after all images and text have
> been displayed. This is the area that the visitor can 'scroll' up and down
> in.
> I have already calculated the height of the useable part of the browser
> using:
> document.body.clientHeight
>
> Has anybody any ideas?
> Is this possible?


var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.body && typeof document.body.scrollHeight !=
'undefined') {
docHeight = document.body.scrollHeight;
}
should work with NN4 and later and IE4 and later. Only problem is
IE6/Win in standards compliant mode where you need
document.documentElement.scrollHeight
so with some more checks
var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
}
else if (document.body && typeof document.body.scrollHeight !=
'undefined') {
docHeight = document.body.scrollHeight;
}

--

Martin Honnen
http://JavaScript.FAQTs.com/

 
Reply With Quote
 
 
 
 
Paul
Guest
Posts: n/a
 
      10-25-2003
Hi,
I'm wondering if someone out there can help me overcome this quandary.
I need to be able to calculate the height of the current page. I need to
calculate the height of the page in pixels after all images and text have
been displayed. This is the area that the visitor can 'scroll' up and down
in.
I have already calculated the height of the useable part of the browser
using:
document.body.clientHeight

Has anybody any ideas?
Is this possible?

Thank-you,

Paul





 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      10-26-2003


Paul wrote:

> "Martin Honnen" <(E-Mail Removed)> wrote in message
> news:3f9a7850$(E-Mail Removed)...
>
>>
>>Paul wrote:
>>
>>
>>>Hi,
>>> I'm wondering if someone out there can help me overcome this

>
> quandary.
>
>>> I need to be able to calculate the height of the current page. I

>
> need to
>
>>>calculate the height of the page in pixels after all images and text

>
> have
>
>>>been displayed. This is the area that the visitor can 'scroll' up and

>
> down
>
>>>in.
>>> I have already calculated the height of the useable part of the

>
> browser
>
>>>using:
>>>document.body.clientHeight
>>>
>>> Has anybody any ideas?
>>> Is this possible?

>>
>> var docHeight;
>> if (typeof document.height != 'undefined') {
>> docHeight = document.height;
>> }
>> else if (document.body && typeof document.body.scrollHeight !=
>>'undefined') {
>> docHeight = document.body.scrollHeight;
>> }
>>should work with NN4 and later and IE4 and later. Only problem is
>>IE6/Win in standards compliant mode where you need
>> document.documentElement.scrollHeight
>>so with some more checks
>> var docHeight;
>> if (typeof document.height != 'undefined') {
>> docHeight = document.height;
>> }
>> else if (document.compatMode && document.compatMode != 'BackCompat') {
>> docHeight = document.documentElement.scrollHeight;
>> }
>> else if (document.body && typeof document.body.scrollHeight !=
>>'undefined') {
>> docHeight = document.body.scrollHeight;
>> }
>>

>
> Thanks for your suggestions but these methods aren't returning the actual
> height of the page (the 'scrollable' height)
>
> I know can use object.scrollHeight to retrieve the scrolling height of the
> object:
>
> http://www.msdn.microsoft.com/librar...entid=28000441
>
> But when I use:
>
> document.write("document.body.scrollHeight is " +
> document.body.scrollHeight);
>
> It doesn't return the correct value.
>
> Please see\try the html at the end of this post where I try many different
> methods to get the value I want.
>
> Thanks for any suggestions off anyone,
>
> Paul
> ----------
>
> <html>
> <head>
> <title>Example</title>
> <SCRIPT TYPE="text/javascript">
> <!--
> function redo()
> {
> window.location.reload();
> }
> window.onresize = redo;
> //-->
> </SCRIPT>
> <body>
> <SCRIPT TYPE="text/javascript">
> <!--
> document.write("document.body.scrollHeight is " +
> document.body.scrollHeight);
> document.write("<br>document.body.clientHeight is " +
> document.body.clientHeight);
> document.write("<br>document.body.offsetHeight is " +
> document.body.offsetHeight);
> document.write("<br>document.body.clientHeight is " +
> document.body.clientHeight);
> document.write("<br>document.body.scrollHeight is " +
> document.body.scrollHeight);
> document.write("<br>document.documentElement.scrol lHeight is " +
> document.documentElement.scrollHeight);
> document.write("<br>document.height is " + document.height);
> document.write("<br>window.dialogHeight is " + window.dialogHeight);
> document.write("<br>screen.height is " + screen.height);
> document.write("<br>document.scrollHeight is " + document.scrollHeight);
> var docHeight1;
> if (typeof document.height != 'undefined') {
> docHeight1 = document.height;
> }
> else if (document.body && typeof document.body.scrollHeight !=
> 'undefined') {
> docHeight1 = document.body.scrollHeight;
> }
> document.write("<br><br>docHeight1 is " + docHeight1);
> var docHeight2;
> if (typeof document.height != 'undefined') {
> docHeight2 = document.height;
> }
> else if (document.compatMode && document.compatMode != 'BackCompat') {
> docHeight2 = document.documentElement.scrollHeight;
> }
> else if (document.body && typeof document.body.scrollHeight !=
> 'undefined') {
> docHeight2 = document.body.scrollHeight;
> }
> document.write("<br>docHeight2 is " + docHeight2);


Well, how do you suppose the browser can return the height of the
complete page here at this point where the complete page has not yet
been loaded. I still think you are looking for the value I suggested but
of course you should only read the value after the page has been loaded
and not while it loads.



--

Martin Honnen
http://JavaScript.FAQTs.com/

 
Reply With Quote
 
Paul
Guest
Posts: n/a
 
      10-26-2003
"Martin Honnen" <(E-Mail Removed)> wrote in message
news:3f9a7850$(E-Mail Removed)...
>
>
> Paul wrote:
>
> > Hi,
> > I'm wondering if someone out there can help me overcome this

quandary.
> > I need to be able to calculate the height of the current page. I

need to
> > calculate the height of the page in pixels after all images and text

have
> > been displayed. This is the area that the visitor can 'scroll' up and

down
> > in.
> > I have already calculated the height of the useable part of the

browser
> > using:
> > document.body.clientHeight
> >
> > Has anybody any ideas?
> > Is this possible?

>
> var docHeight;
> if (typeof document.height != 'undefined') {
> docHeight = document.height;
> }
> else if (document.body && typeof document.body.scrollHeight !=
> 'undefined') {
> docHeight = document.body.scrollHeight;
> }
> should work with NN4 and later and IE4 and later. Only problem is
> IE6/Win in standards compliant mode where you need
> document.documentElement.scrollHeight
> so with some more checks
> var docHeight;
> if (typeof document.height != 'undefined') {
> docHeight = document.height;
> }
> else if (document.compatMode && document.compatMode != 'BackCompat') {
> docHeight = document.documentElement.scrollHeight;
> }
> else if (document.body && typeof document.body.scrollHeight !=
> 'undefined') {
> docHeight = document.body.scrollHeight;
> }
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/
>


Thanks for your suggestions but these methods aren't returning the actual
height of the page (the 'scrollable' height)

I know can use object.scrollHeight to retrieve the scrolling height of the
object:

http://www.msdn.microsoft.com/librar...entid=28000441

But when I use:

document.write("document.body.scrollHeight is " +
document.body.scrollHeight);

It doesn't return the correct value.

Please see\try the html at the end of this post where I try many different
methods to get the value I want.

Thanks for any suggestions off anyone,

Paul
----------

<html>
<head>
<title>Example</title>
<SCRIPT TYPE="text/javascript">
<!--
function redo()
{
window.location.reload();
}
window.onresize = redo;
//-->
</SCRIPT>
<body>
<SCRIPT TYPE="text/javascript">
<!--
document.write("document.body.scrollHeight is " +
document.body.scrollHeight);
document.write("<br>document.body.clientHeight is " +
document.body.clientHeight);
document.write("<br>document.body.offsetHeight is " +
document.body.offsetHeight);
document.write("<br>document.body.clientHeight is " +
document.body.clientHeight);
document.write("<br>document.body.scrollHeight is " +
document.body.scrollHeight);
document.write("<br>document.documentElement.scrol lHeight is " +
document.documentElement.scrollHeight);
document.write("<br>document.height is " + document.height);
document.write("<br>window.dialogHeight is " + window.dialogHeight);
document.write("<br>screen.height is " + screen.height);
document.write("<br>document.scrollHeight is " + document.scrollHeight);
var docHeight1;
if (typeof document.height != 'undefined') {
docHeight1 = document.height;
}
else if (document.body && typeof document.body.scrollHeight !=
'undefined') {
docHeight1 = document.body.scrollHeight;
}
document.write("<br><br>docHeight1 is " + docHeight1);
var docHeight2;
if (typeof document.height != 'undefined') {
docHeight2 = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight2 = document.documentElement.scrollHeight;
}
else if (document.body && typeof document.body.scrollHeight !=
'undefined') {
docHeight2 = document.body.scrollHeight;
}
document.write("<br>docHeight2 is " + docHeight2);
//-->
</SCRIPT>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
<p>Text to make the page longer in vertical height. Need to work out exactly
how long this is.</p>
</body>
</html>


 
Reply With Quote
 
Paul
Guest
Posts: n/a
 
      10-26-2003

"Martin Honnen" <(E-Mail Removed)> wrote in message
news:3f9bc5a3$(E-Mail Removed)...
>
>
> Paul wrote:
>
> > "Martin Honnen" <(E-Mail Removed)> wrote in message
> > news:3f9a7850$(E-Mail Removed)...
> >
> >>
> >>Paul wrote:
> >>
> >>
> >>>Hi,
> >>> I'm wondering if someone out there can help me overcome this

> >
> > quandary.
> >
> >>> I need to be able to calculate the height of the current page. I

> >
> > need to
> >
> >>>calculate the height of the page in pixels after all images and text

> >
> > have
> >
> >>>been displayed. This is the area that the visitor can 'scroll' up and

> >
> > down
> >
> >>>in.
> >>> I have already calculated the height of the useable part of the

> >
> > browser
> >
> >>>using:
> >>>document.body.clientHeight
> >>>
> >>> Has anybody any ideas?
> >>> Is this possible?
> >>
> >> var docHeight;
> >> if (typeof document.height != 'undefined') {
> >> docHeight = document.height;
> >> }
> >> else if (document.body && typeof document.body.scrollHeight !=
> >>'undefined') {
> >> docHeight = document.body.scrollHeight;
> >> }
> >>should work with NN4 and later and IE4 and later. Only problem is
> >>IE6/Win in standards compliant mode where you need
> >> document.documentElement.scrollHeight
> >>so with some more checks
> >> var docHeight;
> >> if (typeof document.height != 'undefined') {
> >> docHeight = document.height;
> >> }
> >> else if (document.compatMode && document.compatMode != 'BackCompat')

{
> >> docHeight = document.documentElement.scrollHeight;
> >> }
> >> else if (document.body && typeof document.body.scrollHeight !=
> >>'undefined') {
> >> docHeight = document.body.scrollHeight;
> >> }
> >>

> >
> > Thanks for your suggestions but these methods aren't returning the

actual
> > height of the page (the 'scrollable' height)
> >
> > I know can use object.scrollHeight to retrieve the scrolling height of

the
> > object:
> >
> >

http://www.msdn.microsoft.com/librar...entid=28000441
> >
> > But when I use:
> >
> > document.write("document.body.scrollHeight is " +
> > document.body.scrollHeight);
> >
> > It doesn't return the correct value.
> >
> > Please see\try the html at the end of this post where I try many

different
> > methods to get the value I want.
> >
> > Thanks for any suggestions off anyone,
> >
> > Paul
> > ----------
> >
> > <html>
> > <head>
> > <title>Example</title>
> > <SCRIPT TYPE="text/javascript">
> > <!--
> > function redo()
> > {
> > window.location.reload();
> > }
> > window.onresize = redo;
> > //-->
> > </SCRIPT>
> > <body>
> > <SCRIPT TYPE="text/javascript">
> > <!--
> > document.write("document.body.scrollHeight is " +
> > document.body.scrollHeight);
> > document.write("<br>document.body.clientHeight is " +
> > document.body.clientHeight);
> > document.write("<br>document.body.offsetHeight is " +
> > document.body.offsetHeight);
> > document.write("<br>document.body.clientHeight is " +
> > document.body.clientHeight);
> > document.write("<br>document.body.scrollHeight is " +
> > document.body.scrollHeight);
> > document.write("<br>document.documentElement.scrol lHeight is " +
> > document.documentElement.scrollHeight);
> > document.write("<br>document.height is " + document.height);
> > document.write("<br>window.dialogHeight is " + window.dialogHeight);
> > document.write("<br>screen.height is " + screen.height);
> > document.write("<br>document.scrollHeight is " + document.scrollHeight);
> > var docHeight1;
> > if (typeof document.height != 'undefined') {
> > docHeight1 = document.height;
> > }
> > else if (document.body && typeof document.body.scrollHeight !=
> > 'undefined') {
> > docHeight1 = document.body.scrollHeight;
> > }
> > document.write("<br><br>docHeight1 is " + docHeight1);
> > var docHeight2;
> > if (typeof document.height != 'undefined') {
> > docHeight2 = document.height;
> > }
> > else if (document.compatMode && document.compatMode != 'BackCompat') {
> > docHeight2 = document.documentElement.scrollHeight;
> > }
> > else if (document.body && typeof document.body.scrollHeight !=
> > 'undefined') {
> > docHeight2 = document.body.scrollHeight;
> > }
> > document.write("<br>docHeight2 is " + docHeight2);

>
> Well, how do you suppose the browser can return the height of the
> complete page here at this point where the complete page has not yet
> been loaded. I still think you are looking for the value I suggested but
> of course you should only read the value after the page has been loaded
> and not while it loads.
>
>
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/
>


A good point, thanks.

When would be the best time to run this code? Considering that even
though the page has fully loaded, the images upon the page may not have been
loaded yet, and the height of the 'scrollable' size may change again.

A time delay would be undesirable.

This is what I have tried so far:

<html>
<head>
<title>Tamarish Art</title>
<SCRIPT TYPE="text/javascript">
<!--
function pageHeight()
{
var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
}
else if (document.body && typeof document.body.scrollHeight !=
'undefined') {
docHeight = document.body.scrollHeight;
}
}
window.onload = pageHeight;
//-->
</SCRIPT>
</head>
<body>
<SCRIPT TYPE="text/javascript">
<!--
document.write("Scrollable page height is " + docHeight);
//-->
</SCRIPT>
</body>
</html>

However, when I open the page, I get an error:
'docHeight' is undefined

Can you help me iron out these last few creases?

Thank-you very much for your help,

Paul


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
textbox height different than input height tshad ASP .Net 1 03-08-2007 10:04 PM
measuring web controls height at runtime (or converting .height % to px) Wotney ASP .Net 1 10-25-2006 01:39 PM
how to get specific cell height without hard-coding a height value laredotornado@zipmail.com HTML 0 08-19-2006 08:13 PM



Advertisments