zuk · August 29, 2015 13:56
diff --git a/compass.js b/compass.js
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1 id="compass-reading">Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">
            app.initialize();

            $('.app').on('click', function () { 
                alert('Hello!');
            });

            function gotCompassReading(reading) {
                $('#compass-reading').text(reading.magneticHeading);
                $('.app').css('transform', 'rotate('+( -reading.magneticHeading )+'deg)');
            }

            function gotCompassError(err) {
                alert(err);
            }

            $(document).on('deviceready', function () {
                navigator.compass.watchHeading(gotCompassReading, gotCompassError);
            });
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="format-detection" content="telephone=no" />
	<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<title>Hello World</title>
	</head>
	<body>
	<div class="app">
	<h1 id="compass-reading">Apache Cordova</h1>
	<div id="deviceready" class="blink">
	<p class="event listening">Connecting to Device</p>
	<p class="event received">Device is Ready</p>
	</div>
	</div>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<script type="text/javascript">
	app.initialize();

	$('.app').on('click', function () {
	alert('Hello!');
	});

	function gotCompassReading(reading) {
	$('#compass-reading').text(reading.magneticHeading);
	$('.app').css('transform', 'rotate('+( -reading.magneticHeading )+'deg)');
	}

	function gotCompassError(err) {
	alert(err);
	}

	$(document).on('deviceready', function () {
	navigator.compass.watchHeading(gotCompassReading, gotCompassError);
	});
	</script>
	</body>
	</html>