Web Analytics Made Easy - StatCounter <!DOCTYPE and getElementById - CodingForum

Announcement

Collapse
No announcement yet.

<!DOCTYPE and getElementById

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    <!DOCTYPE and getElementById

    I tried changing from:

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

    to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    I get no errors on validation and IE6 goes into strict mode. But now Mozilla 1.0 won't read the function below and IE6 won't if it's called from:

    onresize = function() {
    DockToMenu();
    }

    But IE6 does work onresize if the window is small enough to activate the function from:

    onload = function() {
    DockToMenu();
    }

    The function is called from the page like this:

    <script type="text/javascript" src="docs/Scripts.js"></script>

    And from "Scripts.js" like this:

    if (typeof document.getElementById!="undefined"&&typeof window.opera=="undefined") {
    document.write('<\script src="docs/Scripts_DOM.js" type="text/javas\cript"></s\cript>');
    } else {
    }

    Is the syntax incorrect in this function or is there something else I should be changing? Also, will IE5.5 be able to render the changes?


    This function is in "Scripts_DOM.js"

    function DockToMenu() {
    var TopOfMenu = document.getElementById('Menu').offsetTop;
    var HeightOfMenu = document.getElementById('Menu').scrollHeight+30;
    var AvailableWindow = document.body.clientHeight;
    var BottomOfMenu = TopOfMenu+HeightOfMenu;
    if (AvailableWindow <= BottomOfMenu+3) {
    document.getElementById('Info').style.top = BottomOfMenu-90;
    } else if (AvailableWindow > BottomOfMenu+4) {
    document.getElementById("Info").style.top = "";
    document.getElementById("Info").style.bottom = '0px';
    }
    }

    Thanks for your help.
    Tags: None
  • #2
    Here is a test page. If you remove the DOCTYPE declaration it works.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <script>
    function DockToMenu() {
    var TopOfMenu = document.getElementById('Menu').offsetTop;
    var HeightOfMenu = document.getElementById('Menu').scrollHeight;
    var AvailableWindow = document.body.clientHeight;
    var BottomOfMenu = TopOfMenu+HeightOfMenu;
    if (AvailableWindow <= BottomOfMenu) {
    document.getElementById('Info').style.top = BottomOfMenu;
    } else if (AvailableWindow > BottomOfMenu) {
    document.getElementById("Info").style.top = "";
    document.getElementById("Info").style.bottom = '0px';
    }
    }

    onload = function() {
    DockToMenu();
    }

    onresize = function() {
    DockToMenu();
    }
    </script>
    <style>
    #Menu, #Info
    {position: absolute; border-style: solid;}

    #Menu
    {top: 0px; left: 0px; border-color: #0000ff}

    #Info
    {left:0px; bottom: 0px; border-color: #ff0000}
    </style>
    </head>
    <body>
    <div id="Menu">
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content
    </div>
    <div id="Info">
    content
    </div>
    </body>
    </html>

    (Edited to give the borders some colour)
    Last edited by Graeme Hackston; Jul 14, 2002, 02:25 PM.

    Comment

    • #3
      The !DOCTYPE element is used by later browsers to determine how to interpret the HTML tags in the file. The specific document type in the element specifies XHTML, instead of HTML 4.0, so the page must conform to the rules in the XHTML standard for the page to be valid. In particular, read section 4.8, and this page as well.

      I didn't find the onresize keyword in the DTD referenced in the URL and only one reference to "onload".

      Comment

      • #4
        try debugging for things like this

        document.getElementById('Info').style.top = BottomOfMenu-90;


        a object's position is a string value, not a number, and while it works in quirks mode, it won't work in standards-compliant mode. In this case the correct syntax would be

        document.getElementById('Info').style.top = (BottomOfMenu-90)+"px";
        "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

        Comment

        • #5
          OIC, thanks poccil.

          It says in section 4.8 that you must use CDATA around scripts or use external files. This might explain why my example above doesn't work at all with the DOCTYPE but sort of works (except for onresize) in the external file I'm testing with on my computer.

          I guess it's back to HTML 4.01.

          Comment

          • #6
            Ok, thanks brothercake, I'll give that a wurl.

            Comment

            • #7
              If nothing else I'm giving my browsers a good work out. I don't think DOCTYPE is still an issue, it sort of works no matter what.

              This almost works in Mozilla 1.0, other than during > resizing. On my machine "Infos" borders get stuck on the top and bottom positions but pick the bottom onmouseup. IE6 moves the div to top no matter what.

              function DockToMenu() {
              var TopOfMenu = document.getElementById('Menu').offsetTop;
              var HeightOfMenu = document.getElementById('Menu').scrollHeight;
              var AvailableWindow = document.body.clientHeight;
              var BottomOfMenu = TopOfMenu+HeightOfMenu;
              if (AvailableWindow <= BottomOfMenu) {
              document.getElementById('Info').style.top = 209+"px";
              } else if (AvailableWindow > BottomOfMenu) {
              document.getElementById('Info').style.top = "";
              document.getElementById('Info').style.bottom = "0px";
              }
              }


              This almost works in IE6 but when resized from less than "Menus" height it flashes "Info'". Mozilla 1.0 can't pick a position for "Infos" top and bottom borders after "Infos" style is changed to top.

              function DockToMenu() {
              var TopOfInfo = document.getElementById('Info').offsetTop;
              var TopOfMenu = document.getElementById('Menu').offsetTop;
              var HeightOfMenu = document.getElementById('Menu').scrollHeight;
              var BottomOfMenu = TopOfMenu+HeightOfMenu;
              if (TopOfInfo < BottomOfMenu) {
              document.getElementById('Info').style.top = 209+"px";
              } else if (TopOfInfo >= BottomOfMenu) {
              document.getElementById('Info').style.top = "";
              document.getElementById('Info').style.bottom = 0+"px";
              }
              }

              Is there any syntax errors?
              Last edited by Graeme Hackston; Jul 15, 2002, 12:46 AM.

              Comment

              • #8
                Well that last function is really dumb. Still at it though.

                Comment

                • #9
                  This works perfectly with or without the XHTML DOCTYPE in Mozilla 1.0.

                  IE6 has got me confused. With the DOCTYPE in the page it only moves the div to the top position but won't go back to the bottom and alerts a client height of 0. Without the DOCTYPE it works fine and alerts the client height.

                  I must be doing something wrong or IE6 doesn't use clientHeight with this DOCTYPE. As always, thank you for your help.

                  <edit>I can't make the CDATA thing work at all but have been testing with an external file.</edit>

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html>
                  <head>
                  <title>TEST</title>
                  <style>
                  #Menu, #Info
                  {position: absolute; border-style: solid;}

                  #Menu
                  {top: 50px; left: 0px; border-color: #0000ff; width: 50px; height: 220px;}

                  #Info
                  {bottom: 0px; left:0px; border-color: #ff0000; width: 50px; height: 20px;}
                  </style>
                  <script type="text/javascript">
                  function DockToMenu() {
                  var AvailableWindow = document.body.clientHeight;
                  var TopOfInfo = document.getElementById('Info').offsetTop;
                  var TopOfMenu = document.getElementById('Menu').offsetTop;
                  var HeightOfMenu = document.getElementById('Menu').scrollHeight;
                  var BottomOfMenu = TopOfMenu+HeightOfMenu;
                  if (TopOfInfo < BottomOfMenu) {
                  document.getElementById('Info').style.top = (BottomOfMenu)+"px";
                  } if (AvailableWindow >= BottomOfMenu) {
                  document.getElementById("Info").style.top = "";
                  document.getElementById("Info").style.bottom = '0px';
                  }
                  }


                  function ClientHeight() {
                  alert(document.body.clientHeight + " px")
                  }

                  onload = function() {
                  DockToMenu();
                  ClientHeight();
                  }

                  onresize = function() {
                  DockToMenu();
                  }
                  </script>
                  </head>
                  <body>
                  <div id="Menu">
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content<br />
                  content
                  </div>
                  <div id="Info">
                  content
                  </div>
                  </body>
                  </html>
                  Last edited by Graeme Hackston; Jul 15, 2002, 12:43 AM.

                  Comment

                  • #10
                    I beleive I've got it. The key is setting the body to 100%. Doing this gives me a clientHeight in IE6.

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html>
                    <head>
                    <title>TEST</title>
                    <style>
                    body
                    {margin: 0; padding: 0; height:100%;}

                    #Menu, #Info
                    {position: absolute; border-style: solid;}

                    #Menu
                    {top: 50px; left: 0px; border-color: #0000ff; width: 50px; height: 220px;}

                    #Info
                    {bottom: 0px; left:0px; border-color: #ff0000; width: 50px; height: 20px;}
                    </style>
                    <script type="text/javascript">
                    function DockToMenu() {
                    var AvailableWindow = document.body.clientHeight;
                    var TopOfInfo = document.getElementById('Info').offsetTop;
                    var TopOfMenu = document.getElementById('Menu').offsetTop;
                    var HeightOfMenu = document.getElementById('Menu').scrollHeight;
                    var BottomOfMenu = TopOfMenu+HeightOfMenu;
                    if (TopOfInfo < BottomOfMenu) {
                    document.getElementById('Info').style.top = (BottomOfMenu)+"px";
                    } if (AvailableWindow >= BottomOfMenu) {
                    document.getElementById("Info").style.top = "";
                    document.getElementById("Info").style.bottom = '0px';
                    }
                    }

                    function ClientHeight() {
                    alert(document.body.clientHeight + " px")
                    }

                    onload = function() {
                    DockToMenu();
                    ClientHeight();
                    }

                    onresize = function() {
                    DockToMenu();
                    }
                    </script>
                    </head>
                    <body>
                    <div id="Menu">
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content<br />
                    content
                    </div>
                    <div id="Info">
                    content
                    </div>
                    </body>
                    </html>

                    Comment

                    Previous template Next
                    Working...
                    X