topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-game-ch06-resize.htm / htm



  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Page Resize</title>
    <link rel="stylesheet" href="mobile-game-ch03-touch-lib-base.css" type="text/css" />
    <script src='mobile-game-ch03-touch-lib-jquery.min.js'></script>
  </head>
  <body>
    <div id='container'>
      <canvas id='game' width='480' height='320'></canvas>
    </div>
  
  <script>
  
  // Wait for document ready callback
  $(function() {
    var maxWidth = 480;
    var maxHeight = 440;
    var initialWidth = $("#game").attr('width');
    var initialHeight = $("#game").attr('height');
  
    var handleResize = function() {
        // Get the window width and height
      var w = window.innerWidth, h = window.innerHeight,
          newDim;
  
      if(w <= maxWidth) {
       newDim = { width: Math.min(w,maxWidth),
                  height: Math.min(h,maxHeight) };
  
       $("#game").css({position:'absolute', left:0, top:0 });
  
       $("#container").css('width','auto');
      } else {
       newDim = { width: initialWidth,
                  height: initialHeight };
  
       $("#game").css('position','relative');
       $("#container").css('width',maxWidth);
  
      }
      $("#game").attr(newDim)
  
      // Let the game know the page has resized.
      // Game.resize(newDim);
  
    }
  
    window.bind('resize',handleResize);
  
    handleResize();
  });
  </script>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.