Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
64 lines (56 sloc) 1.724 kb
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
- You can obtain one at -->
<!DOCTYPE html>
<html manifest="compass.appcache">
<meta charset=utf-8 />
<title>Cardinal Direction Compass</title>
.pointer {
height: 0;
width: 0;
border-left: 2em solid transparent;
border-right: 2em solid transparent;
border-bottom: 8em solid black;
margin: -10px 0 0 -40px;
top: 40%;
left: 50%;
position: absolute;
.n {
top: 20%;
font:5em Helvetica;
margin: 0 0 0 -40px;
<script src="js/jquery.js"></script>
<div class="n">N<br><br><br><br>S</div>
<div class="pointer"></div>
$(document).ready(function() {
var rotate = function (deg) {
$(".n").css({ "-moz-transform": "rotate(0deg)"});
$(".n").css({ "-moz-transform": "rotate(" + deg + "deg)"});
$(".n").css({ "-o-transform": "rotate(0deg)"});
$(".n").css({ "-o-transform": "rotate(" + deg + "deg)"});
$(".n").css({ "-ms-transform": "rotate(0deg)"});
$(".n").css({ "-ms-transform": "rotate(" + deg + "deg)"});
$(".n").css({ "-webkit-transform": "rotate(0deg)"});
$(".n").css({ "-webkit-transform": "rotate(" + deg + "deg)"});
$(".n").css({ "transform": "rotate(0deg)"});
$(".n").css({ "transform": "rotate(" + deg + "deg)"});
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function (e) {
rotate(360 - e.alpha);
}, false);
Jump to Line
Something went wrong with that request. Please try again.