Window innerWidth, innerHeight, centering and scaling elements

For todays post I tough I would take a break from working on some intense stuff to just writing about a not so intense subject that is the window.innerWidth, and window.innerHeight properties of the window object.
These properties are used to get the inner width and height of the browser window. This information can then be used as a way to center and position elements using javaScript code, and the style API.

1 - Basic

The basic idea here is that the window.innerWidth, and window.innerHeight properties will always give the inner width and height of the browser window. So I can attach an on resize event to the window object, and then update the info about the current status of this each time the window resizes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>window innerWidth and innerHeight</title>
</head>
<body>
<div id="out"></div>
<script>
var out = document.getElementById('out'),
update = function(){
out.innerHTML = window.innerWidth + ',' + window.innerHeight;
};
update();
window.addEventListener('resize', function(e){
update();
});
</script>
</body>
</html>

So that is the basic idea of inner width and height, but now the question is what it is that one would do with that information. There are also a number of other properties that a client side javaScript developer should be aware of that also come in handy when working with properties like this. So lets look at least a few examples of using the window inner width and height properties.

2 - Center and element width window inner width and height

So one thing that can be done with this info is to use it to center a fixed position element. The left and top css values of an element can be changes with javaScript code via the style API. However first I need to know the values to set for the position of the element. The inner width and height properties can be used to find the center of the browser window by just dividing the values by two. Then on top of that I need to subtract half of the width and height of the element that I want to center. To get the width and height of an element there is the scroll width and scroll height properties of an element reference object that will do nicely.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>window innerWidth and innerHeight</title>
</head>
<body>
<div id="container" style="position:fixed;width:640px;height:480px;background-color:black;">hello</div>
<script>
var div = document.getElementById('container'),
center = function(el){
var w = window.innerWidth,
h = window.innerHeight,
x = w / 2 - el.scrollWidth / 2,
y = h / 2 - el.scrollHeight / 2;
el.style.left = x + 'px';
el.style.top = y + 'px';
};
center(div);
window.addEventListener('resize', function(e){
center(div);
});
</script>
</body>
</html>

3 - toggle full

In this section I will be writing about a quick little toggle full screen example. It is not really full screen mind you, but it is making it so the element ends up being the whole size of the window, and then back again.

This is like the center element example I just went over before, but now I am adding a toggle full method that will toggle a boolean value. If the boolean value is true then the inner width and height will be used to set the width and height of an element. If the boolean is false then the width and height of the element will be set to some hard coded values that are a kind of standard size for the element. I then have an event handler attached to the element so that when the element is clieck then the element will be toggled to full screen and back.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
<title>window innerWidth and innerHeight</title>
</head>
<body>
<div id="container" style="position:fixed;width:640px;height:480px;background-color:black;"></div>
<script>
state = {
div: document.getElementById('container'),
full: false,
w: 640,
h: 480,
center : function(){
var w = window.innerWidth,
h = window.innerHeight,
el = this.div,
x = w / 2 - el.scrollWidth / 2,
y = h / 2 - el.scrollHeight / 2;
el.style.left = x + 'px';
el.style.top = y + 'px';
},
toggleFull: function(){
this.full = !this.full;
var w = this.full ? window.innerWidth: this.w,
h = this.full ? window.innerHeight: this.h,
el = this.div;
el.style.width = w + 'px';
el.style.height = h + 'px';
this.center();
}
},
state.center();
window.addEventListener('resize', function(e){
state.center();
});
state.div.addEventListener('click', function(e){
state.toggleFull();
});
</script>
</body>
</html>

4 - Conclusion

So I like to make posts on simple examples like this now and then, it is a nice break from working on something that takes house or even days to get working. Regardless I have come to find that sometimes simple things like this are not always so simple. I also can not say that using window.innerWidth and height are the best ways to go about centering elements, and toggling to full screen or not. I find myself preferring html only solutions for things like this if I can find them actually.