HTML element not resizing when I set window.onresize

Question

I recently started learning about web development, in particular Javascript, and I'm trying to write some simple functions to advance my grasp of the language. I wrote a function to resize a box's height to be proportional to the window, but for some reason it isn't working - the resize function is not updating the page each time I resize the browser window. I feel like I'm making some really silly error, but because I'm not familiar with Javascript I can't figure out what it is.

My HTML is extremely simple:

<body>
<div id = "box">Hi.</div>
</body>

and the Javascript code is:

function resizeToScreen(element, percent)
{
    var wHeight = window.innerHeight;
    var objHeight = wHeight * (percent/100);
    element.style.height = objHeight +"px";
}

window.onresize = resizeToScreen(document.getElementById('box'), 50);

Here's the link to the jsFiddle, which highlights the box yellow: http://jsfiddle.net/sallyg/mb8hB/1/

You seem to be immediately executing the `resizeToScreen` function. You need to provide a function reference to `onresize`, so that it can be called when the window is resized. Like: `window.onresize = function () { resizeToScreen(document.getElementById("box"), 50); };`. You want to bind the event **after** the DOM is ready (putting it inside of `window.onload = function () { /* HERE */ };` should be fine for now), so that resizing doesn't occur before the `#box` element is ready — Ian, Jun 20 '13 at 21:10
@Ian this. I was just about to write that up but you beat me to the punch! — CodeMoose, Jun 20 '13 at 21:13
@Teemu Yeah, I had a feeling this could probably be done without JavaScript, but I didn't look into the question enough, and just answered the immediate problem. If that would work, you should definitely post an answer — Ian, Jun 20 '13 at 21:17
@Ian I don't know, OP clearly asks why the code doesn't work. You've answered to the question, maybe just add the CSS thing to your answer... — Teemu, Jun 20 '13 at 21:20
@Teemu I just thought you should get the credit for pointing it out :) So as I look at it more, I'm realizing simply `height: 50%;` wouldn't work, because the div's height is only as big as its container. So if the body doesn't have an explicit height, I'm not sure the `50%` would do much/anything. If the body's height was set to `100%`, then I think the `50%` would work properly — Ian, Jun 20 '13 at 21:22
@Ian Well, someone might downvote kind of a irrelevant answer. But true, `height` wouldn't work without setting a height to the body too. — Teemu, Jun 20 '13 at 21:30
Hi @Teemu, I did already know you could use the height:50% property, but my main purpose in writing this code was to practice this in Javascript since I'm trying to learn it. Thank you for pointing that out, though - it's definitely a lot simpler. — skg123, Jun 21 '13 at 14:22
@user2506848 That's what I was thinking... Anyway, are you aware, that `onresize` will fire hundreds of times during a resize. That'll make even a simple code quite expensive. Please check [this answer](http://stackoverflow.com/a/4298672/1169519), it might be useful... — Teemu, Jun 21 '13 at 15:18

score 3 · Answer 1 · edited May 23 '17 at 11:56

3

You seem to be immediately executing the resizeToScreen function. You need to provide a function reference to onresize, so that it can be called later when the window is resized. Like:

window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};

You want to bind the event after the DOM is ready, like putting it inside of:

window.onload = function () {
    // HERE
};

should be fine for now, so that resizing doesn't occur before the #box element is ready.

Note that instead of setting .onEVENT properties is fine, but can be overwritten, so it's somewhat suggested to use addEventListener (and attachEvent for old IE).

Here's an example of that, which can hopefully seamlessly be used in both types of browsers:

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

and use it like:

addEvent(window, "load", function () {
    addEvent(window, "resize", function () {
        resizeToScreen(document.getElementById("box"), 50);
    });
});

References:

addEventListener: https://developer.mozilla.org/es/docs/DOM/elemento.addEventListener
addEventListener vs. onEVENT: addEventListener vs onclick

edited May 23 '17 at 11:56

Community

1
1

answered Jun 20 '13 at 21:12

Ian

50,146
13
101
111

How old is old IE? BTW Great answer this is the reason I use SO. – raam86 Jun 20 '13 at 21:42
1

Thank you :) Well, I'm not sure if there's a defined "old IE", but I've always taken it as meaning older than version 9 – Ian Jun 20 '13 at 21:43
@raam86 Not sure if you were notified of that comment - I forgot to add the `@raam86` part :) – Ian Jun 21 '13 at 06:06
Thanks a lot @ian, that was very helpful and it now works. Just out of curiosity though, what did you mean about onevent properties getting overwritten? – skg123 Jun 21 '13 at 14:18
@user2506848 No problem, glad it helps :) What I meant about that is it's possible to overwrite properties. So say you wanted to set `window.onload` multiple times (or maybe another library attempts to). Every time you set it, it gets overwritten. Say you have `window.onload = function () { alert("1"); }` and then later, in whatever place, there is also this code: `window.onload = function () { alert("2"); }`. Well, when the window loads, only the `2` will be alerted. Using the `addEventListener` allows you to attach multiple listeners for an event without overwriting – Ian Jun 21 '13 at 14:20
@user2506848 And I just updated my answer with a new link in the "References" part that explains that a little more – Ian Jun 21 '13 at 14:22

score 0 · Answer 2 · answered Jun 20 '13 at 21:23

0

The problem is in the below statement. You are "calling" resizeToScreen(), and "assigning" its return value to "onresize".

window.onresize = resizeToScreen(document.getElementById("box"), 50);

Instead, you want to "attach" your function to the resize event. This is how you do it:

window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};.

answered Jun 20 '13 at 21:23

Tushar Roy

362
3
7

1

Thanks @tushar-roy! This helped me a lot in understanding the fundamental problem with my code. – skg123 Jun 21 '13 at 14:25

HTML element not resizing when I set window.onresize

2 Answers2