document.body.scrollTop in IE

Discussion in 'JavaScript' started by rickbkis, Mar 23, 2005.

0
Page 1 of 2
  1. #1
    I've been using html without the DOCTYPE spec. That worked fine, but I couldn't position a table correctly in css in IE.

    From another discussion on the forum, it was recommended to use the following DOCTYPE specification, and tables would position correctly:

    So, I did that. It worked great for positioning the table.

    However, with this DOCTYPE, 'document.body.scrollTop' in IE reports zero, no matter where the body is scrolled.

    Yeesh.

    I can get around it because I need to position the table in one page (and can specify the DOCTYPE), and I rely on the scrollTop value on another page (and can leave the DOCTYPE off that page).

    Not an optimal or elegant solution & besides, I'm going to need the scrollTop value in both pages, later on.

    Sooo - Questions:
    • Is there a better construct/value to use to get the equivalent of 'document.body.scrollTop'
    • Is there another DOCTYPE that does both correctly?

    Any thoughts appreciated.

    rickb
     
    rickbkis, Mar 23, 2005 IP
  2. nullbit

    nullbit Peon

    Messages:
    489
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Post the JS, I'll try help.
     
    nullbit, Mar 23, 2005 IP
  3. rickbkis

    rickbkis Peon

    Messages:
    45
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here it is:

    <script language="javascript">
    function LoadIFrame(jpgfile)
    {
    var iframe = document.getElementById("bigframe");
    iframe.src = "/scribi/lib/IFrameContents.php?fn=" + jpgfile;
    iframe.style.left=10;
    iframe.style.top = document.body.scrollTop + 10;
    iframe.style.display = "block";
    }


    If I use the transitional 4.01 doctype, document.body.scrollTop always returns zero (in Win IE 6), no matter the scrolling of the page (works fine in FF, Opera.)

    Actually, I got both situtations to work reasonably well by reverting to the 3.2 doctype. So, I'm moiving on.

    rickb
     
    rickbkis, Mar 24, 2005 IP
  4. prosiak

    prosiak Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I have the same problem :( Can't using scrollTop when loose.dtd existed.

    Mr. Prosiak
     
    prosiak, Apr 11, 2005 IP
  5. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It seems that scrollTop only works if the overflow property is set:

    <div style="height: 100px; width: 100px; overflow: scroll;" onclick="alert(this.scrollTop)">
    0123456789 0123456789 0123456789 0123456789 0123456789 0123456789
    </div>

    J.D.
     
    J.D., Apr 11, 2005 IP
  6. RandyTayler

    RandyTayler Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    THANK YOU ALL!

    I never would have learned why document.body.scrollTop wasn't working right -- I changed it to a 3.2 doctype and all is well.

    The wonders of search engines.
     
    RandyTayler, Jun 13, 2005 IP
  7. geckex

    geckex Peon

    Messages:
    1
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    IE6 and DTD 4.01 requires you to use document.documentElement in stead of document.body, so u will need somthing like the below:

    if (document.documentElement && !document.documentElement.scrollTop)
    // IE6 +4.01 but no scrolling going on
    else if (document.documentElement && document.documentElement.scrollTop)
    // IE6 +4.01 and user has scrolled
    else if (document.body && document.body.scrollTop)
    // IE5 or DTD 3.2
     
    geckex, Oct 1, 2005 IP
    sebastianrs likes this.
  8. Epica

    Epica Well-Known Member

    Messages:
    1,007
    Likes Received:
    95
    Best Answers:
    0
    Trophy Points:
    170
    #8
    isn't it just mind blowing what varied treasures await you at Digital Point!!??
     
    Epica, Oct 1, 2005 IP
  9. sebastianrs

    sebastianrs Active Member

    Messages:
    635
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    70
    #9
    Umm... YES! This one just saved me a few hours for sure ;)
     
    sebastianrs, Mar 29, 2006 IP
  10. dethlon

    dethlon Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    hi..guys..
    i have a problem here...

    the problem is like this....
    i have managed to create a chat application using PHP with the auto refresh...
    for the chatting screen, i have used layer to contain all the user chatting messages..as u know..when user keep on typing and sending messages..the layer will eventually and automatically create a vertical scroll...
    To retrieve the data from the database...i need to keep the chatting screen(layer page) to be frefreshed in every several seconds...
    the problem is..when it is refreshing....the scroll bar in the layer will also be refreshed and the screen will scroll up back to the top of the messages...

    so, i wanna ask who knows how to make the scrollbar not to back to top...but stay at the bottom (when page is refreshing)..so that the user can see the latest message they typed...

    any javascript methods or other functions can help this?

    thanks...
    ----------------------------------------------------------------------

    i have heard some reccomendation to use the document.objectelement.scrollTop method n i try to use it...but i wont works...
    this is the sample scenario...

    (let's say i want to make the distance become 10000 from the top (scenario 2)

    scenario 1:

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

    <script language="JavaScript" type="text/JavaScript">
    <!--

    function scrollUp()
    {
    document.Layer1.scrollTop = Layer1.scrollHeight;
    }


    //-->
    </script>

    <title>Untitled Document</title>
    <META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">
    </head>
    <body onload = "scrollUp()">

    <div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    </div>

    </body>
    </html>



    scenario 2 :

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

    <script language="JavaScript" type="text/JavaScript">
    <!--

    function scrollUp()
    {
    document.Layer1.scrollTop = 10000;
    }


    //-->
    </script>

    <title>Untitled Document</title>
    <META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">
    </head>
    <body onload = "scrollUp()">
    <div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">

    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

    </div>
    </body>
    </html>

    anyone can tell me how to properly use taht method? pls ....
    thanks....
     
    dethlon, Jun 18, 2006 IP
  11. niklasringdahl

    niklasringdahl Guest

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Just wanted to thank you, you saved my day! :) I struggled with non working js code to get the mouse position, but now it works like a charm!

    - Niklas
     
    niklasringdahl, Jun 29, 2007 IP
  12. Blinky82

    Blinky82 Well-Known Member

    Messages:
    1,370
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    150
    #12
    Thanks a lot for this shared info. Find it really interesting. :)
     
    Blinky82, Aug 22, 2007 IP
  13. akrap

    akrap Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    i know thats very old a topic, but it's usefull. so thaks for this info.
     
    akrap, Mar 23, 2008 IP
  14. kmofo

    kmofo Active Member

    Messages:
    442
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    85
    #14
    now i know why doctype is so important. thanks!
     
    kmofo, Apr 4, 2008 IP
  15. baybossplaya

    baybossplaya Active Member

    Messages:
    597
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #15
    you mean thanks for the pr?
     
    baybossplaya, Apr 19, 2008 IP
  16. amoona

    amoona Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    This is a useful post. I've learned something good:D
     
    amoona, May 26, 2008 IP
  17. gullam18

    gullam18 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Can anybody tell... why is this not working in IE but Firefox?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <title>Pure CSS Scrollable Table with Fixed Header</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="language" content="en-us" />

    <style type="text/css">
    <!--


    /* define height and width of scrollable area. Add 16px to width for scrollbar */
    div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 756px
    }

    /* Reset overflow value to hidden for all non-IE browsers. */
    html>body div.tableContainer {
    overflow: hidden;
    width: 756px
    }

    /* define width of table. IE browsers only */
    div.tableContainer table {
    float: left;
    width: 740px
    }

    /* define width of table. Add 16px to width for scrollbar. */
    /* All other non-IE browsers. */
    html>body div.tableContainer table {
    width: 756px
    }

    /* set table header to a fixed position. WinIE 6.x only */
    /* In WinIE 6.x, any element with a position property set to relative and is a child of */
    /* an element that has an overflow property set, the relative value translates into fixed. */
    /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
    thead.fixedHeader tr {
    position: relative
    }

    /* set THEAD element to have block level attributes. All other non-IE browsers */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    html>body thead.fixedHeader tr {
    display: block
    }

    /* make the TH elements pretty */
    thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
    }


    /* define the table content to be scrollable */
    /* set TBODY element to have block level attributes. All other non-IE browsers */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* induced side effect is that child TDs no longer accept width: auto */
    html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
    }

    -->
    </style>
    <script language="javascript">

    var speed = 5;
    function scroll(theDiv) {
    var div1 = document.getElementById(theDiv);
    //alert(div1.scrollHeight);
    div1.scrollTop = div1.scrollTop + speed;
    //div.scrollTop = div.scrollHeight;
    t1=setTimeout("scroll('"+theDiv+"')",1000);
    }

    function getval(theDiv) {
    var div1 = document.getElementById(theDiv);
    alert(div1.scrollTop);
    }
    </script>
    </head>
    <body onload="scroll('news')">



    <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" class="scrollTable">
    <thead class="fixedHeader">
    <tr>
    <th><a href="#">Header 1</a></th>
    <th><a href="#">Header 2</a></th>

    <th><a href="#">Header 3</a></th>
    </tr>
    </thead>
    <tbody class="scrollContent" id="news">
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>

    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>

    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>

    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>

    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>

    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>

    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>

    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>

    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>

    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>

    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>

    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>

    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>

    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>

    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>

    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>

    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>

    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>

    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>

    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>

    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>

    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>

    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>

    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>

    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>

    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>

    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>

    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>

    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>

    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>

    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>

    </tr>
    <tr>
    <td>End of Cell Content 1</td>
    <td>End of Cell Content 2</td>
    <td>End of Cell Content 3</td>
    </tr>
    </tbody>
    </table>

    </div>

    <input type="button" value="Get ScrollTop" onclick="getval('news');">
    <script language="javascript">document.getElementById("news").scrollTop = 1;</script>
    </body></html>
     
    gullam18, Jun 4, 2008 IP
  18. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #18
    please use [ code ] tags guys! its easier for us to help
     
    crath, Jun 4, 2008 IP
  19. andyoudontstop

    andyoudontstop Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    andyoudontstop, Jun 16, 2008 IP
  20. yantomulia

    yantomulia Peon

    Messages:
    57
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #20
    thanks for sharing this information
     
    yantomulia, Jun 28, 2008 IP
Page 1 of 2