[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

get the height of the rendered HTML page

Posted on 2005-04-25
4
Medium Priority
?
327 Views
Last Modified: 2008-02-01
I am trying to get the height of the rendered HTML page(the final graphical representation shown in the browser). Is this even posible? because i get "undefined" at the output.

Here is the code:
<html>
<script type="text/javascript">
function getDim()
{
document.write(document.clientHeight)
}
</script>
<body bgcolor="#66CCFF">
<table id=source>
<tr><td height=20>
<h3>Frame A</h3>
</td></tr>
<form>
<input type="button" onclick="getDim()" value="ShowMe">
</form>
</body>
</html>
0
Comment
Question by:xtremecris
  • 2
4 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 160 total points
ID: 13862103
If you use a strict doctype, then you can use document.body.clientHeight

example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>Test</title>
<head>
<script type="text/javascript">
function getDim()
{
    alert(document.body.clientHeight)
}
</script>
<body bgcolor="#66CCFF">
<table id=source>
<tr><td height=20>
<h3>Frame A</h3>
</td></tr>
</table>
<form>
<input type="button" onclick="getDim()" value="ShowMe">
</form>

</body>
</html>

If you're not using a doctype(Which you absolute should), you could put an outer DIV surrounding your HTML and measure the height of that div.

Example:

<html>
<title>Test</title>
<head>
<script type="text/javascript">
function getDim()
{
    alert(document.getElementById('content').offsetHeight)
}
</script>
<body bgcolor="#66CCFF">
<div id="content">
<table id=source>
<tr><td height=20>
<h3>Frame A</h3>
</td></tr>
</table>
<form>
<input type="button" onclick="getDim()" value="ShowMe">
</form>
</div>
</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13862123
Check this:

<html>
<script type="text/javascript">
function getDim(){
  alert(document.body.clientHeight)
}
</script>
<body bgcolor="#66CCFF">
<table id=source>
<tr><td height=20>
<h3>Frame A</h3>
</td></tr>
</table>
<form>
<input type="button" onclick="getDim()" value="ShowMe">
</form>
</body>
</html>

0
 
LVL 1

Author Comment

by:xtremecris
ID: 13862166
Excelent Batalf, 100x. :)
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13862175
Glad I could help!

Batalf
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question