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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Determining pixel length of row

    How could I use JavaScript to determine the pixel length of a specific column in a specific row that has a percentage width?

    For instance:
    Code:
    <table cellpadding="1" cellspacing="1">
         <tr>
              <td width="25%">something</td>
              <td width="50%">something else</td>
              <td width="5%">text</td>
              <td width="20%">yet more text</td>
         </tr>
    </table>
    How could I tell how far across the browser page each table column had stretched measured in pixels?
    Last edited by bauhsoj; 08-20-2005 at 06:07 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try this

    PHP Code:
    <script type="text/javascript">
    <!--
    function 
    myWidth(cell){
    cellWidth=cell.offsetWidth+"px"
    alert(cellWidth)
    }
    //-->
    </script>


    <table cellpadding="1" cellspacing="1" border="1">
         <tr>
              <td width="25%" onclick="myWidth(this)">something</td>
              <td width="50%" onclick="myWidth(this)">something else</td>
              <td width="5%" onclick="myWidth(this)">text</td>
              <td width="20%" onclick="myWidth(this)">yet more text</td>
         </tr>
    </table> 
    Just thought, you will also have to take into account the cellpadding and cellspacing so you'd have to go something like this.

    PHP Code:
    <script type="text/javascript">
    <!--
    onload=function myWidth(){

    tdCell=document.getElementById("mytable").getElementsByTagName("TD")

    padding=document.getElementById("mytable").cellPadding
    spacing
    =document.getElementById("mytable").cellSpacing

    spadding
    =(spacing*1+padding*1)*2

    for(i=0;i<tdCell.length;i++){
    alert("The width of cell "+(i+1)+" is "+(tdCell[i].offsetWidth-spadding))
    }

    }
    //-->
    </script>


    <table id="mytable" cellpadding="1" cellspacing="1" border="1">
         <tr>
              <td width="25%">something</td>
              <td width="50%">something else</td>
              <td width="5%">text</td>
              <td width="20%">yet more text</td>
         </tr>
    </table> 
    Last edited by Mr J; 08-20-2005 at 09:01 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That's disturbingly simple.

    I had envisioned some various convoluted methods to solve this problem. Glad I waited on a response to this post before plowing through my way.

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Now I have one additional problem.

    What is the ratio relationship between the "width" attribute of a table column and the "size" attribute of an input text field? I am trying to get an input field to dynamically stretch the length of a rendered table.

    I got close to a ratio of 1/6 but still can't seem to fine-tune it just right so that the input text field fits exactly into the table column.

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    You need to go something like

    textInput.style.width = column.offsetWidth
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mr J
    textInput.style.width = column.offsetWidth
    I tried that but strangely enough the width doesn't change. Just to see the effect I added that to an onFocus attribute so that when I clicked on the field it would expand to the width of the column. There were no javascript errors or warning generated at all. Nothing happens.

    Here is the code I am testing it with:
    Code:
    <table>
         <tr><td>text</td><td>more text</td></tr>
         <tr>
              <td colspan="2" id="td_field">
                   <input id="field" maxlength="255" name="field" type="text"
                   onFocus="this.style.width = document.getElementById('td_field').offsetWidth"
                   />
              </td>
         </tr>
    </table>
    This is being tested in Firefox 1.0.6.

    Thanks for your help thus far.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Nothing happened because it is already the width of the table

    Try this example

    Code:
    <table border="1" width="100%">
    <tr><td>text</td><td>more text</td></tr>
    <tr>
    <td colspan="2" id="td_field">
    <input id="field" maxlength="255" name="field" type="text" onFocus="this.style.width = document.getElementById('td_field').offsetWidth">
    </td>
    </tr>
    </table>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can just set the width of the textbox to 100% to fit it exactly in the cell.
    Code:
    <td colspan="2" id="td_field">
    <input id="field" maxlength="255" name="field" type="text" style="width:100%" />
    </td>

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    470
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    You can just set the width of the textbox to 100% to fit it exactly in the cell.
    That seems to be the easiest way to solve the problem.


  •  

    Posting Permissions

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