How to determine page height/length?

JavaScript
1

Hello, does anyone know how to determine page height so I could display the maximum number of ads in page. i.e. if page height is 600px it would show 5 ads, however if page height was 1200px it could show 12 ads. I have a fixed column on the right hand side of my page for ad space & I would like to maximize the height avaliable to display ads.

2

The best way to achieve this is probably by using

document.getElementById('elementId').offetHeight

It will get the calculated height of the container in pixels so you can define it using percent, em’s, or let it be determined by content. Once the page has loaded, get the height of the relevant element using .offsetHeight and place your ads accordingly.
If you need the height of the body element, document.body.offsetHeight will get you that.

3

Thanks alot for the reply, I will look into this and get back to you if I have any problems.

4

Do you think that this will cause me all kinds of problems, browsers etc etc, has it been done before? is there a script already out there?

whats your thoughts people!

5

You should be good with offsetHeight. I use it a lot.
A quick Google,
javascript get height of div “offsetHeight”

This is a good read,

HTH

6

I am setting up a cfm page to pull articles from one table, and a column of banner ads from another.
What I want to do is somehow determine the length of the article, and dynamically call from 2 to 12 banner ads,
so that the column matches the height of the page.

Other than counting the words in the article and using some calculation based on that,
is there any other way to find the page height in cf,
or with a combination of js / cf ?

7

One way to do it is to add a target id to the bottom of the text block at the bottom of he page and then measure the target’s position on the rendered page. The script below does this for a target called “endTxt” and then tells you the distance using an alert().

You can adapt this script to meet your needs. Once you have the end of the page you can work out how many adverts will fit into the space available in the side box. You can even use the offset to adjust the height of the side box so that it is exactly the height of the text block.

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Page Height</title>
<style type="text/css">
<!--
body     { font-family:arial; font-weight:normal; font-size:13px; color:#000; background-color:#FFF; }
#divBlock { position:absolute; top:20px; left:100px; width:200px; border:1px solid #F00; }
-->
</style>
<script type="text/javascript">
<!--
// determines position of target
 function getHt(ref)
  { var offsetTrail=document.getElementById(ref);
    var offsetTop=0;
    while(offsetTrail) { offsetTop+=offsetTrail.offsetTop;  offsetTrail=offsetTrail.offsetParent;   }
// for Macs
    if(navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined")
       { offsetTop+=document.body.topMargin;
       }
     // pixels from top of page
       alert(offsetTop+"px")
  }
// --------------
//-->
</script>
</head>

<body onload="getHt('endTxt')">

<div id="divBlock">
  <p class="a">Magnus es, domine, et laudabilis valde: magna virtus tua, et
  sapientiae tuae non est numerus. et laudare te vult homo.</p>
  <p>aliqua portio creaturae tuae, et homo circumferens mortalitem suam,
  circumferens testimonium peccati sui et testimonium, quia superbis resistis<span id="endTxt">.</span>
</div>
<!-- end divBlock -->

</body>

</html>
8

did the last resolution resolve this?

ditto (One way to do it is to add a target id to the bottom of the text block at the bottom of he page and then measure the target’s position on the rendered page. The script below does this for a target called “endTxt” and then tells you the distance using an alert)

9

Thanks for the info :slight_smile:

10

P.S I will update if this works or not

11

did this work out for you?