Accessing undefined properties

[jpettyjohn]

I am trying to resize a table cell, id="lower_middleNav", based on the height of another cell, id="left_Bin", on the same page.Neither of these have their heights defined to start with and "left_Bin" grows in height depending on the content (which is pulled in dynamically on the server).So far I've tried accessing height through the DOM but it comes up as undefined as it has not been defined explicitly anywhere.

function getHeight(domObj) {	var objRef = findDOM(domObj);	return (objRef.height);}

It finds the object find but not the height.How do I find the height if it isn't explicitly declared and will vary depending on the content?Whether with the DOM or otherwise.

[Jack McKalling]

I don't know if this solves your issue completely, but you may try to use DOM property handling method, instead of that function.

function getHeight(domObj) {var objRef = document.getElementById(domObj);return (objRef.height);}

[scott100]

I think you'll have to add .style in there as well as getElementById function getHeight(domObj) {var objRef = document.getElementById(domObj);return (objRef.style.height);}

[jpettyjohn]

Oh, the findDOM just checks the browser type inside of it. It runs document.getElementById() inside of it and returns the element found (unless under specific circumstances, which in this case it isn't).I just tried it with style, still coming up with the same results. Using the > objRef.style.getHeight method I get undefined, come up with "" on straight property access > objRef.style.height.Is there something that specifically that will check it's actual length? The browser knows the length, it has to so it can render so I figure it exsists somewhere. The DOM seems to just access what is written, not what it actually is. I think this would be the same case if I hard coded the height too short, it would take it as a minimum height and expand it anyways, but the value of that expanded length has to be somewhere.

[Jack McKalling]

come up with "" on straight property access > objRef.style.height.

<{POST_SNAPBACK}>

Hadden't you said you haven't defined the height yet? Then indeed it would return "", which is considered an empty string :)I don't think the browser stored the actual height or length, it just calculated the needed space if there is an overflow to the specified value, or none value at all.But you can calculate the value by your self, as all I can come up with, just by counting the number of lines of content, font size and space in between, all that together and you have the actual real life value. Not that easy though, but alternatively, if you add a property to the element's style, so that it won't overflow the specified value, it would be easy to fetch the actual value

style="display:block; height:###px; overflow-y:scroll;"

Edited May 29, 2006 by Dan The Prof

[jpettyjohn]

I can't constrain it, though it'd be simpler. But I'll give you what the scene so you can think with the product and maybe we can work it back from there.There is a table basically set up like this:

<table>  <tr>    <td id="left_Bin"><!-- There are tables and divs in here that expand and contract depending on dynamic content -->    </td>      <td>      <table>        <tr>          <td>          </td>        </tr>        <tr id="lower_middeNav">            <td>            </td>        </tr>      <table>    </td>        <td>    </td>  </tr></table>

It's a bit a messy as it is an already exsisting site and structure.What needs to happen is that the content of "lower_middleNav" needs to be bottom aligned with the outer table - which is effectively bottom aligned with the "left_Bin".So anyways, I want the resultant left_Bin.height resultant from it's content so I can set the other heights proportionally.

[asylum]

All I know is that unless you define height in the element's inline css (style="height:somanypx") obj.style.height will be undefined. However the AbstractView of the document can get an element's height (or any attribute for that matter) whether it's defined or not.

objRef.style.height = document.defaultView.getComputedStyle(objRef,"").getPropertyValue("height");

Now you can use the objRef.style.height property...don't forget to do a parseInt() btw

[jpettyjohn]

Thanks asylum, that worked perfecton FF and Safari but exploded on Internet Exploder unforunately. Sais "document.defulatView" is not an object, is there an IE equivalent?

[asylum]

I'd be interested to know if the 'obj.style.property' method works in IE. I don't believe it does but if not then I don't know what else to tell you because the way that I gave you is the XHTML DOM way to do it.

[scott100]

Try this for IE (it works in FF but with errors so could be used in conjunction with a conditional statement)

<html><head><title></title><script>function getCalculatedProperty(objName, property) { return eval(objName + ".offsetWidth") + "px";}function start() {str = "myDiv.width = " + getCalculatedProperty("myDiv", "width") + "\n";alert(str);}</script><style><!--div { position:absolute;};--></style></head><body onLoad="start()"><div id="myDiv">What are myDiv's CSS properties?</div></body></html>