Knowing table and div width 1

[Kenrae]

Hello, I need to know a table and a div width. The problem is that I don't define this width, it depends on their internal items (which can be nearly anything).
I've tried to use

object.width

,

object.style.width

,

object.width.value

and

object.style.width.value

for both types of objects, and it doesn't work.
Any ideas?

Thank's

 

[crazyboybert]

unfortunately i dont think you can get the value of css attribute that you dont specify yourself. In fact in most cases (maybe all) you cant even get a value specified in an external stylesheet it has to be in an inline style attribute!!

this has caused me a great deal of frustration and annoyance. One way to get around this maybe to use the offsetLeft property. however this would require you to have dummy elements in place to use as markers for the end of the element you want to size. I have never tried this and dont even know if it will work and am sure that netscape and ie handle offsets differently so that too may be a path fraught with danger.

Good Luck!!

rob

 

[GIGN]

element.offSetWidth/Height

[bb]

 

[baad]

bb, that won't work if those params wheren't defined by script or wrote straight in the code (at least it didn't worked for me when i tryed it) & that is egg-zactly what rob's talkin about (i guess so) Victor

 

[Kenrae]

Uf, that's a pain in the ***!
Let's see, I'll explain my case a little further.
I have a javascript which shows a tree (something similar to a folder tree). This tree is contained in a table with only one cell. Then, Every node is a table with one row, and multiple cells (the number depends on the level of the node). The tree has a background color which is the same of the nodes, of course.
My problem is: On every node I have an onMouseOver event that changes its background color (recovered on the onMouseOut event, as you'll probably guess). Well, since tree-table width is the same than MAX(node-tables width), this change in color doesn't apply to all the node's width. I mean, this change applies to the node's width, not the table width, and this isn't the effect I want to show.

Nodes have a mix of images and text, being the text on a true-type font. So, I could have its images width, but what about the text?

Any ideas? Thank's a lot.

 

[Bentley22]

Sounds like some table sizing problems, but I'm not sure. Can you post the code for this node tree, so we can see the effect? "The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us"
Bill Watterson, Calvin & Hobbes

 

[Kenrae]

Mmm, let's see. I have an object, named folder, which is something like:

function Folder(folderDescription) //constructor
{
  //constant data
  this.desc = folderDescription
  this.id = -1
  this.navObj = 0
  this.iconImg = 0
  this.nodeImg = 0
  this.isLastNode = 0

  //dynamic data 
  this.children = new Array
  this.nChildren = 0

  //methods 
  this.initialize = initializeFolder
  this.createIndex = createEntryIndex
  this.renderOb = drawFolder
  this.blockStart = blockStart
  this.blockEnd = blockEnd
}

-----------------------------------------------------
When I create the node, and first draw it, I use this functions:
-----------------------------------------------------

function drawFolder(leftSide)
{
  var idParam = "id='folder" + this.id + "'"

  if (browserVersion == 2) {
    if (!doc.yPos)
      doc.yPos=20
  }

  this.blockStart("folder")

  if(browserVersion > 0)
    doc.write(&quot;<tr onMouseover = 'this.style.backgroundColor=\&quot;#cccccc\&quot;' onMouseOut = 'this.style.backgroundColor=\&quot;#d9d9d9\&quot;'><td>&quot;)
  else
    doc.write(&quot;<tr><td>&quot;)
  doc.write(leftSide)
  this.outputLink()
  doc.write(&quot;<img id = 'folderIcon&quot; + this.id + &quot;' name = 'folderIcon&quot; + this.id + &quot;' src='&quot; + this.iconSrc+&quot;' border=0></a>&quot;)
  //SDP
  //doc.write(&quot;</td><td valign=middle nowrap>&quot;)
  doc.write(&quot;</td><td valign = middle nowrap style = 'font-family:Verdana,Arial,Helvetica;font-size:x-small;font-weight:bold'>&quot;)
  if (USETEXTLINKS)
  {
    this.outputLink()
    doc.write(this.desc + &quot;</a>&quot;)
  }
  else
    doc.write(&quot;<font style = 'color:#003366'>&quot; + this.desc + &quot;</font>&quot;)
  doc.write(&quot;</td></tr>&quot;)

  this.blockEnd()

  if (browserVersion == 1) {
    this.navObj = doc.all[&quot;folder&quot;+this.id]
    this.iconImg = doc.all[&quot;folderIcon&quot;+this.id]
    this.nodeImg = doc.all[&quot;nodeIcon&quot;+this.id]
  } else if (browserVersion == 2) {
    this.navObj = doc.layers[&quot;folder&quot;+this.id]
    this.iconImg = this.navObj.document.images[&quot;folderIcon&quot;+this.id]
    this.nodeImg = this.navObj.document.images[&quot;nodeIcon&quot;+this.id]
    doc.yPos = doc.yPos+this.navObj.clip.height
  } else if (browserVersion == 3) {
    this.navObj = doc.getElementById(&quot;folder&quot;+this.id)
    this.iconImg = doc.getElementById(&quot;folderIcon&quot;+this.id)
    this.nodeImg = doc.getElementById(&quot;nodeIcon&quot;+this.id)
  }
}
function blockStart(idprefix) {
  var idParam = &quot;id='&quot; + idprefix + this.id + &quot;'&quot;

  if (browserVersion == 2)
    doc.write(&quot;<layer &quot;+ idParam + &quot; top=&quot; + doc.yPos + &quot; visibility=show>&quot;)

  if (browserVersion == 3) //N6 has bug on display property with tables
    doc.write(&quot;<div &quot; + idParam + &quot; style='display:block; position:block;'>&quot;)

  //SDP
  //doc.write(&quot;<table border=0 cellspacing=0 cellpadding=0 &quot;)
  doc.write(&quot;<table border=0 cellspacing=0 cellpadding=0 bgcolor=#d9d9d9 &quot;)

  if (browserVersion == 1)
    doc.write(idParam + &quot; style='display:block; position:block; '>&quot;)
  else
    doc.write(&quot;>&quot;)
}

function blockEnd() {
  var tab

  doc.write(&quot;</table>&quot;)

  if (browserVersion == 2)
    doc.write(&quot;</layer>&quot;)
  if (browserVersion == 3)
    doc.write(&quot;</div>&quot;)
}

----------------------------------------------------
Then, node initialization is:
----------------------------------------------------

//SDP
function resizeAllNodes()
{ var i

//  for(i=0;i<nEntries;i++){
//    doc.write(i+&quot;: &quot;+indexOfEntries[i].navObj)
//  }

//  for(i=0;i<nEntries;i++)
//    indexOfEntries[i].navObj.width=maxWidth
}

indexOfEntries = new Array
nEntries = 0
doc = document
browserVersion = 0
maxWidth = 0


// Main function
// *************

// This function uses an object (navigator) defined in
// ua.js, imported in the main html page (left frame)
function initializeDocument()
{
  switch(navigator.family)
  {
    case 'ie4':
      browserVersion = 1 //IE4
      break;
    case 'nn4':
      browserVersion = 2 //NS4
      break;
    case 'gecko':
      browserVersion = 3 //NS6
      break;
    default:
      browserVersion = 0 //other
      break;
  }

  //foldersTree (with the site's data) is created in an external .js
  foldersTree.initialize(0, 1, &quot;&quot;)

  if (browserVersion == 2)
    doc.write(&quot;<layer top = &quot;+indexOfEntries[nEntries-1].navObj.top+&quot;> </layer>&quot;)

  //The tree starts in full display
  if (!STARTALLOPEN)
    if (browserVersion > 0) {
      // close the whole tree
      clickOnNode(0)
      // open the root folder
      clickOnNode(0)
    }

  //SDP
  // resizes all nodes to maximum width
  resizeAllNodes()

  if (browserVersion == 0)
    doc.write(&quot;<table border=0><tr><td><br><br><font size = -1>This tree only expands or contracts with DHTML capable browsers</font></table>&quot;)
}

-----------------------------------------------------
Thank's

 

[Kenrae]

Hi all.
I've tried a workaround. I've tried to insert every node into a row of the external table. Something like that:

<table>
  <tr onMouseOver and onMouseOut events here><td> //A node
  <table><tr>
    <td>element</td><td>element</td>
  </tr></table>
  </td></tr>
  <tr onMouseOver and onMouseOut events here><td> //A node
  <table><tr>
    <td>element</td><td>element</td><td>element</td>
  </tr></table>
  </td></tr>
</table>

That's what I generate using

document.write

calls.

But it doesn't work fine. When I change a node visibility, by changing its own table visibility, to "hiden", the external table cell where it's located is still there, and it occupies some space...
:-(

Can I change a

<tr>

visibility??

 

[GIGN]

To get rif od the space, set display to none instead.

style.display ="none";

Also - it is offsetWidth - which may have been why it wasn't working [vituz]. What does this return for you?



<div onClick=&quot;alert(this.offsetWidth)&quot; style='background-color:red;'>
?
</div>

 

[baad]

ok, excuse me i was wrong here
my apologies )

but here was a discussion on this subject here in javascriot ir in the html, & as i remember, we weren't able of getting this stuff to work for some reason (don't remember).. as i don't use it myself, i just remembered it; thanks for update

i can't find this thread now.. Victor

 

[Kenrae]

Hey, it works!
Thank's ActiveX!
But now I have another problem. I've calculated the maximum width of all nodes. It's OK. But when I set it to all of them it doesn't seem to work. I must change the width of a <tr> tag, something like:

trObject.width = maxWidth

or

trObject.style.width = maxWidth

It doesn't change!
I can't change offsetWidth, I've tried it, but it's only a getter attribute (you can't change it).
Any ideas?

Oh, and another thing I've just noticed. OffsetWidth only works on NS6, not IE5 :-(