[davidklonski]

Hello

Assuming that I have the following table definition:

Code:

<table border="0" cellpading="0" cellspacing="0">
  <tr>
    <td><!-- content --></td>
    <td><!-- content --></td>
    <td><!-- content --></td>
  </tr>
  <tr>
    <td><!-- content --></td>
    <td id="cell" width="100%" height="100%"><!-- content --></td>
    <td><!-- content --></td>
  </tr>
  <tr>
    <td><!-- content --></td>
    <td><!-- content --></td>
    <td><!-- content --></td>
  </tr>
</table>

Note that I have set the width and height of the middle cell to 100%.
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?
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.

I tried using: cell.style.pixelWidth & cell.style.pixelHeight but I am not getting anyting...

Thanks for the help in advance.

[LJK]

Hi -
Found this article yesterday; can't remember if it was from alistapart or not - sorry!

Using the W3C DOM to position the footer
Just because you use JavaScript, this doesn’t mean you cannot use CSS for positioning elements. The W3C DOM offers an interface to use style rules with JavaScript. This means you can describe JavaScript as if it were CSS, with the addition of some conditional logic and a few height calculations.

Start by marking up your page in its most simplified form, creating a content and a footer block:

<div id="content">...</div>
<div id="footer">...</div>If the height of the content block and the footer together is bigger than the height of the viewport, the footer should follow the normal flow (static positioning). If this is not the case, your script has to position the footer at the bottom of the window. With relative positioning, you can move the footer downwards relative to its position in the current flow (you can also use absolute positioning to achieve this). Sounds like CSS, doesn’t it?

The following function describes what we just defined:

function setFooter() {
if (document.getElementById) {
var windowHeight=getWindowHeight();
if (windowHeight>0) {
var contentHeight=
document.getElementById('content').offsetHeight;
var footerElement=
document.getElementById('footer');
var footerHeight=footerElement.offsetHeight;
if (windowHeight-(contentHeight+footerHeight)>=0) {
footerElement.style.position='relative';
footerElement.style.top=(windowHeight-
(contentHeight+footerHeight))+'px';
}
else {
footerElement.style.position='static';
}
}
}
}

Dissecting the setFooter() function
The setFooter() function first retrieves the height of the viewport and stores it in the windowHeight variable:

var windowHeight = getWindowHeight();Second it retrieves the height of the content element and the footer element:

var contentHeight=
document.getElementById('content').offsetHeight;
var footerElement=document.getElementById('footer');
var footerHeight=footerElement.offsetHeight;

Next it decides if the height of the window is larger than the combined height of the content and footer:


if (windowHeight-(contentHeight+footerHeight)>=0)If this is the case, it repositions the footer relative (to its place in the normal flow) at the bottom of the page:

footerElement.style.position='relative';
footerElement.style.top=
(windowHeight-(contentHeight+footerHeight))+'px';

If they do fill the height of the window, the element is repositioned static to follow the normal flow:


footerElement.style.position='static';To make everything work include the getWindowHeight() function in your script and add two functions that call your setFooter() function at the moment our web document is loaded or resized:

window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}You may view the finished version in example 4. However, there is one little hiccup. Safari is unable to position an element relative (or absolute) when the onload function is called. To work around this issue, add the following style rule:

#footer {
position: relative;
}The technique works in all modern browsers without using hacks, a temporary advantage over the CSS only technique. If a browser cannot calculate one of the heights, if JavaScript is switched off or if a browser doesn’t support JavaScript, the footer will just follow the normal flow. As you can see, structural mark-up and style are still separated and your marked-up code didn’t get more complicated. Maybe scripting tends to be more verbose than CSS, but not in a significant way.


hope it helps,
El