Forums » Help » Resizing browser window

This is more of a JavaScript question about using window.onresize.

In my game I have a 'toggle fullscreen' button that expands the viewport to fill the browser window. It's working successfully. The issue lies with resizing the browser window while in 'fullscreen mode'. I'm trying to do the following.

main.js ('update' section)

if (this.fullscreen && window.onresize) {
 ig.system.resize(document.body.clientWidth, document.body.clientHeight);
}

The window.onresize is having no effect when placed inside an if statement and the game is in 'fullscreen mode'. Yet with this..

window.onresize = ig.system.resize(document.body.clientWidth, document.body.clientHeight);

the viewport resizes nicely upon resizing the browser. Only with this, it begins in 'fullscreen mode', and won't let me toggle out.

I need window.onresize to run ig.system.resize only if the user resizes the browser while in 'fullscreen mode'. Any experience using this event?

The reason your code doesn't work is quite simple, but maybe it's clearer when you rewrite it:

// This doesn't work
var r = ig.system.resize(document.body.clientWidth, document.body.clientHeight);
window.onresize = r;

So what you&039;re actually doing with your code, is calling #ig.system.resize immediately, then assigning the return value of that function to window.onresize. ig.system.resize doesn&039;t return anything; its return value is #undefined.

What you want to do instead, is assign a function, not the return value of a function - you don't want to call it.

window.onresize = function() {
	ig.system.resize(document.body.clientWidth, document.body.clientHeight);
};

Resizing is now mostly working in 'fullscreen mode' thanks to your help :)

But there is a problem. Whenever I resize the browser with the viewport on default size, it expands to fullscreen size. How do I instruct JavaScript not to resize the viewport unless fullscreen is true?

The easiest solution is making fullscreen a global variable:

// disable fullscreen mode by default
ig.global.fullscreen = false;

window.onresize = function() {
	if( ig.global.fullscreen ) {
		ig.system.resize(document.body.clientWidth, document.body.clientHeight);
	}
};

You can later set ig.global.fullscreen to true from anywhere in your game.

Thank you Dominic!

Has anyone looked into html5's fullscreen capability? Apparently it is designed to make select elements (by I'd) fullscreen for various things.

This would be a great thing for impact games because it basically simulates the user pressing f11 and such.