Question

I have a div tag which I populate dynamically. The problem is that in Firefox when i do a test for size(height) I seem to need to run it twice in order to get the correct size. This is the code:

alert("h = " + h + " height:" + document.getElementById("thumbDiv").clientHeight);

Ignore ‘h’ for the time being, what I am curious to know is what is the correct way to get the div tags height in firefox. In ie I use offsetHeight which works for my purposes perfectly. The other thing is the render order in firefox. I populate the div and then query the height with .clientHeight and I get 102, which is I am assuming the empty height of the tag as I have set no height via style, if I press the button again I then get the height of the div with the enlcosed html page which I am pushing into the div. Its odd, and slightly annoying.

I am trying to determine if there is enough room in the browser to display the div contents in their entireity, if not then I am disabling certain features otherwise I get into an infinite scroll problem…

Thanks, R.

Thanks R.

Answer 1

Use a javascript framework to do this for you. Cross browser issues like this are rampant. I recommend jQuery, but all the frameworks have their pro’s and con’s.

See:
clientHeight/clientWidth returning different values on different browsers

For a similar Q&A.