Mobile-Web-App

Friday, August 31, 2012

HTML5 Canvas, fill background

In the example, the function resetCanvas() will fill background according to canvas size. Also, bind the "resize" event to resetCanvas() function using jQuery, such that when user re-size the window, the background always follow to new window size.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

var canvas;
var context; 

$(window).bind("resize", resetCanvas);

function loadcanvas(){
 window.scrollTo(0, 1);
 resetCanvas();
}

function drawBackground(){

 context.fillStyle = "#505050";
 context.fillRect(0, 0, canvas.width, canvas.height);
 
}

function resetCanvas(){
 canvas = document.getElementById("mycanvas");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight; 
 
 context = canvas.getContext("2d");
 
 drawBackground();
}

</script>
</head>
<body onload="loadcanvas();">

<canvas id="mycanvas">
Sorry! Your browser doesn't support Canvas.
</canvas>
</body>
</html>

Tuesday, August 28, 2012

Detect screen size using Javascript

Example to detect screen size using Javascript:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Resize</title>
<script type="text/javascript">

function doOnLoad(){

 window.addEventListener(
  "resize", 
  function() {
   var orientation;
   var windowWidth = window.innerWidth;
   var windowHeight = window.innerHeight;

   if(windowWidth > windowHeight){
    orientation = "Landscape";
   }else if(windowWidth < windowHeight){
    orientation = "Portrait";
   }else{
    orientation = "Square";
   }   
   
   document.getElementById("browserinfo").innerHTML 
    = orientation + " : " + windowWidth + " x " + windowHeight 
    + "<br/>Screen Size: " + screen.width + " x " + screen.height;
  }, 
  false);

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Resize</h1>
<div id="browserinfo"></div>
</body>
</html>

Monday, August 27, 2012

Detect orientation change using Javascript

Example to detect orientation change using Javascript in browser.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Detect Orientation Change</title>
<script type="text/javascript">

function doOnLoad(){
 var supportOrientationChange = "onorientationchange" in window;
 
 if(supportOrientationChange){
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange supported";
  
  window.addEventListener(
   "orientationchange", 
   function() {  
    document.getElementById("browserinfo").innerHTML 
     = window.orientation + " : " + screen.width + " x " + screen.height;
    }, 
   false);
 }else{
  document.getElementById("browserinfo").innerHTML 
   = "onorientationchange NOT supported";
 }
 

}

</script>
</head>
<body onload="doOnLoad();">
<h1>Mobile-Web-App: Javascript Exercise - Detect Orientation Change</h1>
<div id="browserinfo"></div>
</body>
</html>

Thursday, August 23, 2012

Free ebook download from Microsoft Press: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)

The second preview edition of “Programming Windows 8 Apps with HTML, CSS, and JavaScript” by Kraig Brockschmidt is available from Microsoft Press for free in pdf format. The book currently contains 12 chapters and it will be expanded and other ebook formats will be available with the complete book. Sample code also can be downloaded.

Description
This book is about writing Metro style apps for Windows 8 using HTML5, CSS3, and JavaScript. Our primary focus will be on applying these web technologies within the Windows 8 platform, where there are unique considerations, and not on exploring the details of those web technologies themselves.

The new chapters cover collection controls (everything you wanted to know about ListView!), layout (especially view states), commanding UI (app bars, message dialogs, and their friends), the all-important topic of managing state, a close look at input and sensors (a form of input, really), media, animations, and contracts (share, search, the file pickers, and contacts). The earlier preview chapters (1-4) have also been updated and refined.

Table of Contents

The Life Story of a Metro Style App: Platform Characteristics of Windows 8
Quickstart
App Anatomy and Page Navigation
Controls, Control Styling, and Basic Data Binding
Collections and Collection Controls
Layout
Commanding UI
State, Settings, Files, and Documents
Input and Sensors
Media
Purposeful Animations
Contracts

Download Link: http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx

Wednesday, August 22, 2012

Google announced Octane: the JavaScript benchmark suite for the modern web

Google released Octane, a JavaScript benchmark suite that aims to measure a browser’s performance when running the complex and demanding web applications that users interact with daily.

overview of the new tests:

Box2DWeb runs a JavaScript port of a popular 2D physics engine that is behind many well-known simulations and web games.
Mandreel puts a JavaScript port of the 3D Bullet Engine to the test with a twist: The original C++ source code for the engine is translated to JavaScript by Onan Games’ Mandreel compiler, which is also used in countless web-based games.
Pdf.js is based on Mozilla’s PDF reader and shows how Javascript applications can replace complex native browser plug-ins. It measures how fast the browser decodes a sample PDF document.
GB Emulator is derived from an open source emulator of a famous game console running a 3D demo.
CodeLoad measures how quickly a JavaScript engine can bootstrap commonly used JavaScript libraries and start executing code in them. The source for this test is derived from open source libraries (Closure, jQuery).

Source: Chromium Blog - Octane: the JavaScript benchmark suite for the modern web

Sunday, August 19, 2012

Example to modify button style using CSS

<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>Mobile-Web-App: Button</title>

<style type="text/css">
button#cssbutton {
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F0F0F0), color-stop(1.0, #808080));
 border-radius: 15px;
 box-shadow: 0 0 4px #303030;
 width: 100%;
 padding: 5px;
 border: 1px solid black;
 
}
</style>
</head>
<body>
<button type="button">Simple Button</button>
<button id="cssbutton" type="button">Styled Button</button>
</body>
</html>

Force page scroll to top once page loaded

To force the web page scroll to top, you can call window.scrollTo(0, 1). In order to make it happen when page load, modify <body>:

<body onload="window.scrollTo(0, 1);">