SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to determine page height/length?

    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. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way to achieve this is probably by using
    Code:
    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. #3
    Non-Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for the reply, I will look into this and get back to you if I have any problems.

  4. #4
    Non-Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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,
    http://bytes.com/topic/javascript/an...get-height-div

    HTH
    What I lack in acuracy I make up for in misteaks

  6. #6
    Non-Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


    HTML Code:
    <!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>
    Last edited by Mittineague; Dec 13, 2010 at 02:02. Reason: reformatting bbcode tags

  8. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Non-Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info

  10. #10
    Non-Member
    Join Date
    Nov 2006
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S I will update if this works or not

  11. #11
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did this work out for you?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •