HTML and CSS Reference
In-Depth Information
Other than the library jQuery, the only external resource listed is the style sheet called
base.css
. As in
the previous chapter, the
base.css
style sheet consists only of the Meyer reset and a couple of game-specific
styles. Below the reset, add the following two styles:
#container {
padding-top:50px;
margin:0 auto;
width:480px;
}
canvas {
background-color:green;
}
If you open this on a desktop browser, you notice a nice green
<canvas>
element centered on the page.
Next, add the following code before the closing
</body>
tag:
<script>
// Wait for the document.ready callback
$(function() {
var maxWidth = 480;
var maxHeight = 440;
var handleResize = function() {
// Get the window width and height
var w = window.innerWidth ||
window.document.documentElement.clientWidth ||
window.document.body.clientWidth;
var h = window.innerHeight ||
window.document.documentElement.clientHeight ||
window.document.body.clientHeight;
if(w < maxWidth) {
$("#container").css('width','auto');
$("#game").css({position: 'absolute',
top: 0, left: 0, zIndex: 10000 })
.attr({width: w, height: Math.min(h,maxHeight) });
}
}
handleResize();
});
</script>
This snippet of code, which runs on document ready, will be based on the width of the window, either leaving
the Canvas sitting in the middle of the page or changing the positioning of the Canvas to an absolute position at
the full size of the browser. You can see the code by running
resize.html
in the chapter code.
This is unfortunately one circumstance in which jQuery doesn't have a solution that works for all browsers.
The code to determine the scrollbar-less height and width of the client window is different depending on the
browser. Internet Explorer (IE) is again the culprit here, so if you want to ignore versions of IE before version
9, the height and width calculation code can be shortened down to the following:
// Get the window width and height
var w = window.innerWidth, h = window.innerHeight;
