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.
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.
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.
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.