Window innerWidth, innerHeight, centering and scaling elements
The window.innerWidth, and window.innerHeight properties of the window object are a way to go about getting the current size of a window in a page. However not the total size of a screen at least not on desktop clients anyway. That is that on mobile devices the innerWidth property might work okay go get an idea of what the width of the screen of the device is, however on desktop systems it might not because the user might not have there browser window maximized or in full screen. Even if that is not the case it might not be the best option to know what you are dealing with, there is the subject of zooming, and also logical pixels.
1 - Window inner width and height Basics
- These source code examples are on Github
1.1 - Basic example of window.innerWidth and window.innerHeight
The basic idea here is that the window.innerWidth, and window.innerHeight properties will generally give the inner width, and height of the browser window in pixels. Logical pixels rather than native ones actually, but maybe that is a matter for a more advanced section if I get to it.
1.2 - Get up to date info of a page on each resize event
Maybe it is a good idea to have a basic example of window inner width and height that involves attaching an on resize event to the window object, and then display info about the current status of these properties each time the window resizes. If you are not yet familiar with event listeners and the event objects that there are to work with in such listener functions then it might be a good idea to read up more on those topics.
So then I have a div element that I will be using to display the info of the window properties and I am assigning an id to it. I am then using the document get element by id method to get a reference to the div element. I then have an update function that will set the inner text of the div element to what the values of the inner width and height values are, to which I call after defining it to make sure that starting values are set for the div. After that I am attaching an on resize event listener to the window object by calling the add event listener method and passing resize as the event, and then the function that I want to call for each resize. Inside the body of the event hander I am calling the update function.
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. Also another thing to be aware of is if these numbers are always the case in every possible situation when it comes to things like zooming, and logical pixels in relation to actual pixels. In chrome and most other browsers for that matter there is pressing the ctrl and then the /+, /-, and /0 keys to zoom in and out and back to normal zoom level. When doing so the numbers will go down and up depending on the current zoom level. So it goes without saying that these values do not reflect actual pixels dimensions, but a kind of logical pixel length that can be effected by the zoom level of the browser.
2 - Center and element width window inner width and height
The inner width and height properties can be used to find the center of the browser window by just dividing the values by two which is simple enough. 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.
So then these properties of the window object, and an element of interest can be used as a way to go about centering and positioning elements depending on the current width and height of a browser window. However this does string me as an overkill solution for this sort of thing, it might still be best to look into other options for this when it comes to using CSS only as a way to center, and scale elements.
3 - toggle full screen
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 clicked then the element will be toggled to full screen and back.
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.