Home » FireFox » Javascript » JavaScript examples for MozOrientation of FireFox 3.6

JavaScript examples for MozOrientation of FireFox 3.6

Posted on by

Today i present new feature of FireFox 3.6 – MozOrientation

With Canvas and MozOrientaion you will get nice web site!

Please look on my icons of Feed and Twitter! :)

My twitter source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function init() {
additional_load(null);
 window.addEventListener("MozOrientation", additional_load, true);
}

function additional_load(o) {
var drawingCanvasTwitter = document.getElementById('myDrawingTwetter');    
     // Check the element is in the DOM and the browser supports canvas
     if(drawingCanvasTwitter && drawingCanvasTwitter.getContext) {
          // Initaliase a 2-dimensional drawing context
          var context = drawingCanvasTwitter.getContext('2d');
     
               var myImage = new Image();
               myImage.onload = function() {
                    context.clearRect(0,0,150,150);
                    context.save();
                    if(o) {
                         if(o.x > 0)
                              context.translate(0, 134*o.x);
                         else
                              context.translate(-134*o.x, 0);
                    }    

                    if(o)
                         context.rotate((Math.PI/2)*-o.x);
                    context.drawImage(myImage, 0, 40);
                    context.restore();
               }
               myImage.src = "https://developers-life.com/wp-content/uploads/2009/12/tw.jpg";         
     }
}
1
<body onload="init()">

Example for handle orientation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <head>
    <style>
      p { font-size: 12px;
          color: rgb(0, 220, 98);
          background-color: black;
      }
      body { background-color: black; }
    </style>
   
    <script>
      var count = 0;
     
      function handleOrientation(orientData) {
        count++;
        var d = document.getElementById("display");
        d.innerHTML = "<p> count = " + count +  "<p> x = " + orientData.x + "<p> y = " + orientData.y + "<p> z  = " + orientData.z;
      }

      window.addEventListener("MozOrientation", handleOrientation, true);
    </script>
  </head>

  <body>
    <div id="display">
  </body>
</html>

example

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. is based on the WHATWG canvas specification, which itself is based on Apple’s implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.
read more on developer.mozilla.org

Nice feature in firefox Saving a canvas image to a file

And many information about it in apple documentation

Additional