Resizing a table

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • z
    #1

    Resizing a table

    Hi,
    i just wanted to know how i can resize a table using javascript but in this
    special manner:
    I have two tables, one at the top of the page and the other below that one.
    The problem is that in that code shown below there is a scroll in the
    window, and what I want is resizing the table t2 from the height of 100%
    down to the max number of pixels so that there is no scroll in the window.
    Which should be the code for the function resizeTable ?
    I wonder if u get the idea...

    The code is like this:

    <html>
    <head>
    <script language="javas cript" src="fun.js"></script>
    </head>
    <body onLoad="resizeT able(document.g etElementById(t 2))">
    <table id="t1" width="100%" border="1">
    <tr><td>some text</td></tr>
    </table>
    <br>
    <table id="t2" width="100%" height="100%" border="1">
    <tr><th>title </th></tr>
    <tr><td>some text</td></tr>
    </table>
    </body>
    </html>

    Any suggestions?
    Thx in advance



    Tags: None
    • Fred Oz
      #2
      Re: Resizing a table

      z wrote:[color=blue]
      > Hi,
      > i just wanted to know how i can resize a table using javascript but in this
      > special manner:
      > I have two tables, one at the top of the page and the other below that one.
      > The problem is that in that code shown below there is a scroll in the
      > window, and what I want is resizing the table t2 from the height of 100%
      > down to the max number of pixels so that there is no scroll in the window.
      > Which should be the code for the function resizeTable ?
      > I wonder if u get the idea...[/color]

      If you are using HTML 4, the height attribute is depreciated.
      As soon as the page is re-sized, your height setting will not be
      right. I get the feeling this could be much better done in CSS.

      I've made a half-hearted attempt at some code, here's the
      algorithm:

      1. Get the innerHeight/clientHeight of your window

      2. Use offsetParent and offsetTop to find the offset of the
      second table element from the top of the page (note: you need
      to recurse through all the offset parents until you hit the
      body tag)

      3. Make allowance for any cellpadding or spacing, as well as
      table/cell borders at the bottom of your table

      4. After adding all the offsetTops until your parent is the
      body, and whatever you need to allow for the stuff at the
      bottom of the table, subtract that from the
      innerHeight/clientHeight.

      5. Fill your second table with a div that is the remaining
      height of window.

      You should find what you want to know between these two sites:


      <URL:http://www.quirksmode. org/index.html?/viewport/compatibility.h tml>

      <URL:http://www.mozilla.org/docs/dom/domref/dom_el_ref.html >

      And here is some Mozilla-specific code to start with - it does
      not allow for table spacing/padding or borders, so the div is
      re-sized too big. The Quirksmode link provides the IE
      clientHeight additions required.


      function resizeCell(){
      var y = d.offsetTop;
      var d = document.getEle mentById('aDiv' );
      var iH = self.innerHeigh t;
      var n = d;
      while (n.offsetParent .nodeName.toLow erCase() != 'body') {
      alert(n.nodeNam e.toLowerCase() + ': ' + y);
      n = n.offsetParent;
      y += n.offsetTop;
      }
      y = (iH-y) + 'px';
      d.style.height = y;
      alert(iH + ' ' + d.offsetTop + ' ' + y);
      }
      </script>

      <table border="1"><tr> <td><div style="height:
      200px;">hi</div></td></tr></table>
      <table border="1"><tr>
      <td onclick="resize Cell()"><div id="aDiv" style="height:
      50px;">text</div>
      </td>
      </tr></table>



      --
      Fred

        Comment

        • Fred Oz
          #3
          Re: Resizing a table

          Fred Oz wrote:
          [...][color=blue]
          >
          > function resizeCell(){
          > var y = d.offsetTop;
          > var d = document.getEle mentById('aDiv' );
          > var iH = self.innerHeigh t;[/color]

          Ooops, I tidied the code and introduced an error...

          var d = document.getEle mentById('aDiv' );
          var y = d.offsetTop;

          Gotta get the element reference *before* finding its offset...

          --
          Fred

            Comment

            Previous template Next
            Working...