Resizing Divs programmatically
I am working on an HTML5 browser that can be divided into 3 parts: two UI panels to the left and right of the center of a set of square canvases for a playable surface. The three panels must be horizontally aligned and the overall game must maintain a 16: 9 aspect ratio. The left and right panels must be the same width, and all three panels must be the same height. I have specified the minimum width and height inside the resize () function called when the onresize event is detected.
Currently, each panel is a div and all three are contained within a section. Right now, no section is needed, but I want the game to be separate from the additional content at the bottom of the screen that I can add later.
The CSS looks like this:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#gameSection {
white-space: nowrap;
overflow-x: hide;
overflow-y: hide;
}
#leftPanel, #centerPanel, #rightPanel {
display: inline-block;
}
#leftPanel {
background-color: #6495ed;
}
#centerPanel {
background-color: #e0ffff;
}
#rightPanel {
background-color: #b0c4de;
Right now, I have set the background color of each div to show me when I am setting the size of each div correctly.
The body of my HTML document looks like this:
<body onresize="resize()">
<section id="gameSection">
<div id="leftPanel">Left Panel.</div>
<div id="centerPanel">Center Panel.</div>
<div id="rightPanel">Right Panel.</div>
</section>
</body>
And finally, my resize () function (I created a separate function to resize the game if I add multiple items below):
function resize() {
var MIN_GAME_WIDTH = 800;
var MIN_GAME_HEIGHT = 450;
var GAME_ASPECT_RATIO = 16 / 9;
var width = window.innerWidth;
var height = window.innerHeight;
var gWidth, gHeight;
if(width < MIN_GAME_WIDTH || height < MIN_GAME_HEIGHT) {
gWidth = MIN_GAME_WIDTH;
gHeight = MIN_GAME_HEIGHT;
}
else if ((width / height) > GAME_ASPECT_RATIO) {
<!-- width is too large for height -->
gHeight = height;
gWidth = height * GAME_ASPECT_RATIO;
}
else {
<!-- height is too large for width -->
gWidth = width;
gHeight = width / GAME_ASPECT_RATIO;
}
resizeGame(gWidth, gHeight, GAME_ASPECT_RATIO);
}
function resizeGame(var gWidth, var gHeight, var aspectRatio) {
var gSection = document.getElementById("gameSection");
var lPanel = document.getElementById("leftPanel");
var cPanel = document.getElementById("centerPanel");
var rPanel = document.getElementById("rightPanel");
gSection.height = gHeight;
gSection.width = gWidth;
<!-- should the below be taken care of in the CSS? -->
lPanel.height = gHeight;
cPanel.height = gHeight;
rPanel.height = gHeight;
cPanel.width = cPanel.height;
lPanel.width = (gWidth - cPanel.width) / 2;
rPanel.width = lPanel.width;
}
I tried several different commands to resize the div, but it just doesn't work for me. When I try to add test canvases the color appears, but the boxes are still out of size. I also looked at loading an invisible background image on each div and scaling it to the correct size; However, I was able to resize my canvas using the above method before and it seemed to work fine.
Additional Notes
Although I've already managed to resize one canvas, I don't want to use only one canvas for the game, because not all parts of the UI need to be drawn at the same time.
I am trying to keep this in Javascript only.
I suspect I can just use CSS to handle the resizing by setting the aspect ratio to 16: 9 and using width: 56.25% for the center bar and width: 21.875% for the sidebars, but that limits me to one aspect and doesn't explain why my above script doesn't work.
I can provide the entire HTML file if needed. This is what should have looked like this: End goal (no right panel)
Thank!
UDPATE:
jsfiddle
source to share
I got it kind of like here . I made many changes / minor fixes to the code before finding what was wrong (other than various syntax errors):
You used .width
both .height
instead of .style.width
and .style.height
, and you applied integers to them instead of strings with "px" attached to them. Both of these things are pretty self-explanatory to skip.
I also moved onresize from body tag to JS, not sure why it didn't work on jsfiddle, but it's good practice anyway.
In the future: learn how to debug JS using the console, and when you ask questions, use small examples rather than your entire codebase. This question could be simplified: "How do I resize a div?" with one line of JS and one div. You should also ignore this specificity in JS and use flexbox as redbmk said.
source to share