Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    another document.body.scrollHeight issue

    Hi,

    thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out!

    In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport.
    I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle.

    Imho
    pageheight = (document.body.scrollHeight+viewportheight);
    should give me the correct height of the page, but does not, why?
    It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which...

    Here the page:
    http://buchenbergschule.de/ruh/depre...ode/test7.html

    Here the JS Code:

    Code:
    <script type="text/javascript">
    <!--
     var viewportwidth;
     var viewportheight;
     var pageheight;
     
     if (typeof window.innerWidth != 'undefined')
     {
          viewportwidth = window.innerWidth,
          viewportheight = window.innerHeight
     }
     
    
     else if (typeof document.documentElement != 'undefined'
         && typeof document.documentElement.clientWidth !=
         'undefined' && document.documentElement.clientWidth != 0)
     {
           viewportwidth = document.documentElement.clientWidth,
           viewportheight = document.documentElement.clientHeight
     }
     
     
     else
     {
           viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
           viewportheight = document.getElementsByTagName('body')[0].clientHeight
     }
     
    pageheight = (document.body.scrollHeight+viewportheight);
     
    document.write('<style type=text/css> div#linksaussen');
    document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
    document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
    document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
    document.write ('div#rechtsaussen1');
    document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
    document.write ('div#rechtsaussen');
    document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
    alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')
    
    //-->
    </script>
    Again please forgive my noobishness, my bad english and thanks again for any hint!

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please guys any hint is appreciated, do I do something wrong, did I ask wrong, is it impossible, is there a book link newspaper article ANYthing that could help me? How would you tackle the problem?

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    I'm sorry, but that doesn't make sense, to me.

    document.body.scrollHeight *IS* the pageHeight. That is, it's the number of pixels from the top of the <body> to the bottom of the </body>.

    Why would you then ADD ON the height of the window???

    Code:
    +-------------<body>-----------------+
    ==
    ==
    ==   visible part of body, in the window
    ==
    ==
    +--------------------------------------+
    
     more body, only visible by scrolling down
    
    
    
    
    +-------------</body>-----------------+
    So the measurement from <body> to </body> is the body.scrollHeight.

    The measurement of the part that is visible, where the == are, is the window.innerHeight, what you are calling viewportHeight.


    Maybe if you told us what you are trying to *DO*, instead of showing code that doesn't seem to work, that would help??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    Here...try this demonstration:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function addOne( )
    {
        var div = document.createElement("div");
        div.innerHTML = "This div added when document.body.scrollHeight was "
              + document.body.scrollHeight + "pixels";
        document.body.appendChild( div );
    }
    </script>
    <style type="text/css">
    div { 
        border: solid blue 3px;
        background-color: lightblue;
        padding: 20px;
        margin: 5px;
    }
    </style>
    </head>
    <body onload="setInterval(addOne,3000)">
    <div>
    This is the original content on the page.
    </div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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