How to dynamically change Javascript Height

Question

I know that this question has been asked a lot and I assure you I have read a majority of the answers. However, in my case, none of it has worked for me. I am currently trying this:

window.onload = function(){

    var winWidth = parseInt(window.innerWidth);
    var winHeight = parseInt(window.innerHeight);

    document.getElementById("copyRight").innerHTML = winHeight;
    //This is so I could make sure the height was actually changing. It is.

    document.getElementById("grandeContain").style.width = winWidth-15+"px";
    document.getElementById("grandeContain").style.height = winheight+"px";
    document.getElementById("contain").style.width = winWidth-105+"px";
    document.getElementById("contain").style.height = winHeight-90+"px";
    document.getElementById("outside").style.width = winWidth-105+"px";
    document.getElementById("outside").style.height = winHeight-90+"px";
    document.getElementById("aroundToolBar").style.height = winHeight-90+"px";
}

However, no matter what I do the height is not changing onload (I also have this copy and pasted into an onresize function and that doesn't work either). The width parts work fine (not just because that is the default setting for divs; I've tested with many different widths based on window.innerWidth and it changed) but the heights refuses to change. What am I doing wrong? I've always had trouble dynamically changing height and it would be great if I could figure this out once and for all.

Also, if css has anything to do with it, the div tree is like this: grandeContain>contain>(aroundToolBar+outside) where contain is position:relative, aroundToolbar is float:left and width:125px, and outside is position:relative with margin 0 0 0 125px.

Does anyone know what I am doing wrong here?

Also, the 105s and 90s are there soley because of a header and footer in the grandeContain div, with their sibling contain.

So, do you get any exceptions? Or could you make a demo?

Bergi
– Bergi

2013-02-13 20:18:20 +00:00
Commented Feb 13, 2013 at 20:18 — Bergi
– Bergi, Commented Feb 13, 2013 at 20:18

Bergi · Accepted Answer · 2013-02-13 20:31:32Z

1

Did you check in firebug for errors? it seems like on the line:

document.getElementById("grandeContain").style.height = winheight+"px";

you have a typo: should be winHeight+"px" instead of winheight+"px"; maybe causing a variable undefined error.

edited Feb 13, 2013 at 20:31

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Feb 13, 2013 at 20:18

kgarrigan

1331 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically change Javascript Height

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related