calculating <td> width in pixels

Morrislgn · June 4th, 2004, 12:33 PM

Hello,

The problem I have is: how do you get the pixel width of a column in an HTML table which is defined by percentage?

e.g: <td width=30%> </td>

I had a look in a couple of books I own, but there doesnt seem to a function\method to get the width of a column. Any ideas?

Any input and avice is gratefully recieved!

Morris

om_prakash · June 5th, 2004, 02:07 AM

alternatively you can use Style tag or something like
<td width=200>

Om Prakash

Snib · June 5th, 2004, 07:38 AM

om_prakash:

Using percent widths is more compatable when the client is resizing the window. They always take up x percent of the window/available space. Usually not adding a suffix to a width (i.e. 'px', '%', 'in') defaults to px anyway.

HTH,

Snib

<><

om_prakash · June 6th, 2004, 04:30 AM

Snib,
Yes i do agree with you, as '%' gives more options and control.

Om Prakash

Morrislgn · June 8th, 2004, 10:39 AM

Hey!

Firstly, sorry for not replying sooner.

Secondly, thanks for the advice, however it is not quite what i am looking for.

The reason I want to find the width of a column is so I can define the starting position of a drop down navigation bar and align it with the starting position of a banner.

By using % i have been able to create a site which is more 'user friendly' when the client window is resized.

But, at the moment, my naviagtion bar is defined by static coordinates - eg: (130, 109).

So, when the window is resized, the html elements will adjust, but the nav bar wont move with it.

Any ideas about how i can make the nav bar starting position adjust to changes in the window size in the smae way the html elements do?

Many thanks,

Morris

Snib · June 8th, 2004, 10:44 AM

If I understand correctly, why don't you just define the nav bar with '%'?

Snib

<><

Morrislgn · June 8th, 2004, 11:29 AM

Hi,

I still need to define the starting point of the nav bar:

e.g: the starting point is defined in the code by
myNavBar1.moveTo(130, 109);

Because the start point of the name bar is defined statically in code, the start position of the nav bar will never move from (130,109), regardless of the width of the nav bar.

Thanks,

Morris

ChrisScott · June 8th, 2004, 12:30 PM

Hi Morris,

You could use offsetWidth with *most* browsers, something like...

<html>

<head>
<title>Scrap</title>

<script type="text/javascript">
window.onresize = DoResize;
function DoResize(){
    var d = document;
    d.getElementById("NavBar").style.left = d.getElementById("LeftColCell").offsetWidth;
}
</script>

<body onload="DoResize();">

<table style="width: 100%">
    <tr>
        <td id="LeftColCell" style="width: 30%; border: red 1px solid;">left of nav bar</td>
        <td style="width: 70%;">under nav</td>
    </tr>
</table>

<div id="NavBar" style="position: absolute; top: 0px; height: 250px; border: black 1px solid; background-color: whitesmoke; width: 150px;">some nav stuff</div>

</body>
</html>

HTH,

Chris

Morrislgn · June 8th, 2004, 04:29 PM

Hey!

Thanks for the advice, it is really appreciated! However, one small problem, I am looking at my code and I seem to fit your suggestion into it. Here is my code:

Code:

 <script language="JavaScript"src="files/JScriptNavbar/navcond.js"></script>
 <script language="JavaScript">

  var myNavBar1 = new NavBar(0);
  var dhtmlMenu;

  dhtmlMenu = new NavBarMenu(100, 0);
  dhtmlMenu.addItem(new NavBarMenuItem("Home", "index.html"));
  myNavBar1.addMenu(dhtmlMenu);

  dhtmlMenu = new NavBarMenu(100, 120);
  dhtmlMenu.addItem(new NavBarMenuItem("News", ""));
  dhtmlMenu.addItem(new NavBarMenuItem("Weekly Events", "calendar/weekly.html"));
  myNavBar1.addMenu(dhtmlMenu);

  myNavBar1.setColors ("#FFFFFF", "#007AC0", "#C0C0C0", "#FFFFFF", "#666666", "#007AC0", "#cccccc", "#ffffff", "#666666")

  myNavBar1.setAlign("left")

  var fullWidth;
  function init() {
   fullWidth = getWindowWidth() 
    - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

   myNavBar1.resize(745);
   myNavBar1.create();
   myNavBar1.setzIndex(2);

   myNavBar1.moveTo(130, 109);
  }
 </script>
</Head>
<BODY onload="init()">
  <TABLE cellSpacing=0 cellPadding=0>
   <tbody>
    <tr>
     <td width=30% id=col_one>
     </td>
     <td>
      <A href="index.htm">
      <IMG alt="return to the main page." src="images/logo_2.gif">
      </A>
      <br>
      <br>
     </td>
     <td width=30%>
     </td>
    </tr>
   </tbody>
  </table>
</BODY>

All help and suggestions are welcome! Cheers

Morris