Need help setting div in table height using Javascript

Question

I am trying to set the div to a certain height inside an empty table cell to set the cell to 100% height. (The whole page consists of just the table with no padding.)

Here is some relevant code:

<table border="0" width="100%">
 <tr>
  <td class="boxmiddleleft"></td>
  <td class="boxmiddlecenter"><script language="javascript" src="includes/clock.js">/*clock*/</script></td>
 </tr>
 <tr>
  <td class="boxbottomleft"><script language="javascript" src="includes/windowsize.js"></script><div id="divbottomresize"></div></td>
  <td class="boxbottomcenter"><button type="button" onclick="resizeheight();">Changed the window height? Reset by pressing this button.</button></td>
 </tr>
</table>

(With the div im trying to change height called '#divbottomresize')

And the JavaScript I am using for this:

var element = "divbottomresize";
function resizeheight(element) {
 var height = 0;
 var body = window.document.body;
 if (window.innerHeight) {
  height = window.innerHeight;
 } else if (body.parentElement.clientHeight) {
  height = body.parentElement.clientHeight;
 } else if (body && body.clientHeight) {
  height = body.clientHeight;
 }
 element.style.height =   ((height - element.offsetTop) + "px");
}

If you have any idea what I am doing wrong please could you tell me. Alternatively if you find other code that does what I want feel free to paste or link me. (I do not want to use jQuery if possible.)

When I run the code in Chrome and go to 'Inspect Element' I get the error:

windowsize.js:12Uncaught TypeError: Cannot read property 'style' of undefined on the line element.style.height = ((height - element.offsetTop) + "px");

EDIT: I have changed var element = "divbottomresize"; to var element = document.getElementById("divbottomresize"); as someone helpfully suggested. This still does not work and I get the same error and no height change.

Stelian Matei · Accepted Answer · 2012-02-16T19:48:37.557

2

The resize function requires the element parameter, so we need to update the HTML:

 <td class="boxbottomcenter"><button type="button" onclick="resizeheight('divbottomresize');">Changed the window height? Reset by pressing this button.</button></td>

Now, we need to change the Javascript, to use the STRING value passed by the function and then retrieve the tag with that ID for further processing:

function resizeheight(id_element) {
 var div = document.getElementById(id_element);

 var height = 0;
 var body = window.document.body;
 if (window.innerHeight) {
  height = window.innerHeight;
 } else if (body.parentElement.clientHeight) {
  height = body.parentElement.clientHeight;
 } else if (body && body.clientHeight) {
  height = body.clientHeight;
 }
 div.style.height =   ((height - div.offsetTop) + "px");
}

edited Feb 16 '12 at 19:48

answered Feb 16 '12 at 19:22

Stelian Matei

11,553
2
25
29

Thanks loads for the help, I added this change in as that was an error, but I still get the error "element.style.height = ((height - element.offsetTop) + "px");" when I go to the 'Inspect Element' option on chrome. The div still does not resize. – Jason Feb 16 '12 at 19:40
Where is your script located? Maybe the page didn't load when retrieving the div. Let's try this instead: `document.getElementById("divbottomresize").style.height=((height - element.offsetTop) + "px");` – Stelian Matei Feb 16 '12 at 19:44
I saw now there was another problem: the function you created had a parameter element. That was not set since you were calling the function without any parameters. Then, the variable defined outside the function was not read since it had the same name as the function parameter. Please see the updated answer – Stelian Matei Feb 16 '12 at 19:50
The script is stored in `includes/window.js` so not in the main file. I have tried your code change and still no change. I no-longer get an error which is a start, but nothing happens. Very strange... Thanks for your help. – Jason Feb 16 '12 at 19:55
Update, I adapted your code and used `document.getElementById("divbottomresize").style.height=((height - document.getElementById("divbottomresize").offsetTop) + "px");` and this resizes the div! However it does not take off the extra height above (or it collects the wrong window height I don't know). So the result has the div being approximately my window height. Thanks for your help so far. – Jason Feb 16 '12 at 19:58
Sorry your last message only just loaded, looking at edits now. Thanks – Jason Feb 16 '12 at 20:02
try to use the `alert` method to see the actual values computed (the height, offset etc.). Once you see the values, it will be easier to find the problem – Stelian Matei Feb 16 '12 at 20:03
That works a treat thanks! Slight problem though in that it still does not minus the height above this div. It uses the height of the window (or at least a height very similar, I don't have the exact height of my window). I would like to take of the height above this div to make the table at 100% height. – Jason Feb 16 '12 at 20:06
Will try that now, (internet is slow so only just got your message) – Jason Feb 16 '12 at 20:07
I tried that and I get the `height` as 785, the `div.offsetTop` as 0, and the div height in my actual browser window happens to be 767... – Jason Feb 16 '12 at 20:10
Check out this question: http://stackoverflow.com/questions/211703/is-it-possible-to-get-the-position-of-div-within-the-browser-viewport-not-withi – Stelian Matei Feb 16 '12 at 20:11
Will attempt to use that code now, unfortuantly I don't know very much javascript but I'll try and make sense of it! Thank you very much for your time and help! – Jason Feb 16 '12 at 20:15
I ran that code and changed the `xxx` to my div id, and I get an alert saying `0 0`. – Jason Feb 16 '12 at 20:16
It's just occoured that an easy way to solve this would be to input the height of the rest of the table automatically, which I can make fixed no problem and it would hardly affect my work. I shall try this. Thank you very much for your help and time! If this works I shall mark your answer as the final answer. – Jason Feb 16 '12 at 20:31

Need help setting div in table height using Javascript

1 Answers1