ansaurus

Question

why won't my <div> resize with javascript when I tell it to?

Answer 1

A:

I don't think the javascript gets excecuted. I wrapped it inside an init function and it works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
     <title>Test</title>
        <style type="text/css">
      .tableContainer
      {
          overflow: scroll;
          /*height: 400px;  -- this was just to see if the concept works - and this seems to work fine */
      }
     </style>
     <script type="text/javascript">
      function init()
      {
          var tbc = document.getElementById("tblCont");
          var h = Math.round((window.innerHeight)-(70))+"px";

       document.getElementById('test').onclick = function()
       {
           tbc.style.width = "40px";
       }
      }

      window.onload = init;
     </script>
    </head>

    <body>
     <form>
      <input id="test" type="button" value="test" />
     </form>

     <div class="tableContainer" id="tblCont">
       <table width="100%" border="0" cellpadding="0" cellspacing="0" id="mainTbl" class="mainTable">
         <tr class="row_a" id="1">
           <td>id: 1</td>
         </tr>
       </table>
     </div>
    </body>
</html>

richard 2009-11-19 19:11:12

No, it executes, but if you trace it through a debugger like firebug, you will see that it gets called before the div exists, and therefore fails with a "tbc is null" exception.

Jeff B 2009-11-19 19:15:16

Answer 2

+3 A:

Your script is being called before your DOM elements exist. You need to call your script with an onload event handler, and put your script in a function:

<script type="text/javascript">
    function setHeight() {
        var tbc = document.getElementById("tblCont");
        var h = Math.round((window.innerHeight)-(70))+"px";
        tbc.style.height = h;
    }
</script>

<body onload="setHeight()">
....

Jeff B 2009-11-19 19:11:15

Answer 3

A:

Try two things:

First, if you didn't already, comment out the var h line and then set the height manually:

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    //var h = Math.round((window.innerHeight)-(70))+"px";
    tbc.style.height = "50px";
</script>

Second, try alerting out the h variable instead of setting the height:

<script type="text/javascript">
    var tbc = document.getElementById("tblCont");
    var h = Math.round((window.innerHeight)-(70))+"px";
    alert(h);
    //tbc.style.height = "50px";
</script>

My guess is that the problem is with how h is getting set, which is then killing anything after it.

Anthony 2009-11-19 19:11:53

Answer 4

A:

I would highly recommend you look at a third party Grid solution such as the Data Grid from the Dojo toolkit.
From experience, I can say that building a highly-functional data grid from scratch in DHTML is very difficult and making it cross browser compatible is just not fun.

Donal Boyle 2009-11-19 19:12:49

ansaurus

tags:

views:

answers:

why won't my <div> resize with javascript when I tell it to?

related questions