Jump to content

Accessing undefined properties


jpettyjohn
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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);}

Link to comment
Share on other sites

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);}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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 by Dan The Prof
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...