Hello<br />
<br />
Assuming that I have the following table definition:<br />
<br />
<table border="0" cellpading="0" cellspacing="0"><br />
<tr><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
<tr><br />
<td><!-- content --></td><br />
<td id="cell" width="100%" height="100%"><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
<tr><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
</table><br />
<br />
<br />
Note that I have set the width and height of the middle cell to 100%.<br />
Is there a way of knowing on the client-side (probably using Javascript) what is the actual width and height that cell is occupying in pixels?<br />
Obviously, the width and height will be determined by the content of all the cells of the table. However, once the table is drawn, the cell will have a final width and height. I am looking for a way to get those dimensions.<br />
<br />
I tried using: cell.style.pixelWidth & cell.style.pixelHeight but I am not getting anyting...<br />
<br />
Thanks for the help in advance.<!--content-->May I inquire why you would need such a function? HTML was designed for accessibility, so these exact pixel counting things defeat the purpose why HTML was created. This would depend on how their browser renders it (or whether or not they render it at all, since some clients don't support tables), so you really probably cannot retrieve it. In addition, the 100% width and height depend on the parent element, and your twisting up the page even more by giving it an obviously impossible statement to fulfill.<!--content-->Use the offset values:<br />
alert(document.getElementById('cell').offsetWidth+":"+document.getElementById('cell').offsetHeight);<br />
<br />
If no td padding is defined then you need to add the default values (padding:1px 2px; ) to height and width.<br />
<br />
Mozilla also has:<br />
document.defaultView.getComputedStyle(document.getElementById('cell'), null).getPropertyValue('width', null)<br />
Again you must apply default values if necessary (padding:0px 3px; ). Note different to 1st example!<!--content-->thanks for all the help guys<!--content-->
<br />
Assuming that I have the following table definition:<br />
<br />
<table border="0" cellpading="0" cellspacing="0"><br />
<tr><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
<tr><br />
<td><!-- content --></td><br />
<td id="cell" width="100%" height="100%"><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
<tr><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
<td><!-- content --></td><br />
</tr><br />
</table><br />
<br />
<br />
Note that I have set the width and height of the middle cell to 100%.<br />
Is there a way of knowing on the client-side (probably using Javascript) what is the actual width and height that cell is occupying in pixels?<br />
Obviously, the width and height will be determined by the content of all the cells of the table. However, once the table is drawn, the cell will have a final width and height. I am looking for a way to get those dimensions.<br />
<br />
I tried using: cell.style.pixelWidth & cell.style.pixelHeight but I am not getting anyting...<br />
<br />
Thanks for the help in advance.<!--content-->May I inquire why you would need such a function? HTML was designed for accessibility, so these exact pixel counting things defeat the purpose why HTML was created. This would depend on how their browser renders it (or whether or not they render it at all, since some clients don't support tables), so you really probably cannot retrieve it. In addition, the 100% width and height depend on the parent element, and your twisting up the page even more by giving it an obviously impossible statement to fulfill.<!--content-->Use the offset values:<br />
alert(document.getElementById('cell').offsetWidth+":"+document.getElementById('cell').offsetHeight);<br />
<br />
If no td padding is defined then you need to add the default values (padding:1px 2px; ) to height and width.<br />
<br />
Mozilla also has:<br />
document.defaultView.getComputedStyle(document.getElementById('cell'), null).getPropertyValue('width', null)<br />
Again you must apply default values if necessary (padding:0px 3px; ). Note different to 1st example!<!--content-->thanks for all the help guys<!--content-->