fullscreen.html

Monkey Forums/Monkey Code/fullscreen.html

skid	(Posted 2013) [#1]

Run html projects in full screen with the following code.

Behavior of IE9 for 100% styling was solved here - http://stackoverflow.com/questions/6529728/html5-doctype-putting-ie9-into-quirks-mode

The console is hidden by default.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible">
<style>
html, body { height:100%; }
body { margin:0;overflow:hidden }
canvas { width:100%; height:100% }
textarea { display:none }
</style>
</head>
<body>
<canvas id="GameCanvas" onclick="javascript:this.focus();" tabindex=1></canvas>
<textarea id="GameConsole" readonly></textarea>
<script language="javascript" src="main.js">Javascript not supported!</script>
</body>
</html>

When changing your MonkeyGame.html code to the above, also modify the main.js file in same folder with this.

var RESIZEABLE_CANVAS=true;

For both IE9 and Chrome the user needs to "Press F11 Key to Enter and Exit full screen".

skid	(Posted 2014) [#2]

for newer version of monkey try this version:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible">
<style>
body { margin:0;overflow:hidden }
canvas { position:absolute; width:100%; height:100% }
textarea { 
 display:none;
 position:absolute;
 width:80%;
 height:64px;
 bottom:10px;
 left:10px;
 background:none;
 color:#254117;
}
</style>
<script>
function sizeGame(e){
	var can=document.getElementById( "GameCanvas" );
	can.style.width=window.innerWidth+"px"
	can.style.height=window.innerHeight+"px"
	can.width=window.innerWidth
	can.height=window.innerHeight
	if(can.updateSize) can.updateSize()
}
function runGame(e){
	var can=document.getElementById( "GameCanvas" );
	can.style.width=window.innerWidth+"px"
	can.style.height=window.innerHeight+"px"
	can.width=window.innerWidth
	can.height=window.innerHeight
	BBMonkeyGame.Main( can )
}
</script>
</head>
<body onload=runGame() onresize=sizeGame()>
<canvas id="GameCanvas" onclick="javascript:this.focus();" tabindex=1></canvas>
<textarea rows=20 id="GameConsole" readonly></textarea>
<script language="javascript" src="main.js">Javascript not supported!</script>
</body>
</html>

Raph	(Posted 2014) [#3]

When I am trying this or any of the other similar solutions (like for example Ziggy's found here: http://www.monkey-x.com/Community/posts.php?topic=3184) with 78h, I am getting some weird behavior. The render fills the inner window as expected, but it only seems to render if the mouse is moving. Go back to the vanilla MonkeyGame.html (the one with the splitter) and it goes back to normal.

This is in Firefox 30.

Raph	(Posted 2014) [#4]

Hmm, I don't know what I had done, but I seem to have got stretching plus GL both working together on some clean builds by carefully setting up separate targets and doing clean builds.

So never mind. :)