JSFiddle - React, Tailwind, and code Playground

by parag1111

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">$(document).bind("mobileinit", function () {  $.mobile.defaultPageTransition = "none"; });</script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  
  <div data-role="content">
  <div data-role="content" class="compassmeter">
              <div id="ball"></div>
            <input type="button" value="Start Compass" id="startCompass"/>
          </div>
  </div>
  
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>
</body>
</html>

CSS

.compassmeter{
        position:relative !important;
        height:370px; width:320px; 
        /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e8e8e8), to(#b8b8b8)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #e8e8e8, #b8b8b8); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #e8e8e8, #b8b8b8); /* IE 10 */ background: -ms-linear-gradient(top, #e8e8e8, #b8b8b8);
    }

#ball{ background:url(../images/north.png) left top no-repeat; width:250px; height:250px; position:absolute; left:50px; top:90px;}

JavaScript

$(document).bind("deviceready",function(){
        var watchID = 0;
        alert("device ready called");
        // binding touch event to div
        $("#startCompass").bind("touchstart", function(){
            alert("touch start called");
            var options = null;
            
            if(watchID == 0){
                options = {
                    frequency : 100
                };
                alert(watchID);    
                watchID = navigator.compass.watchHeading(function(heading){
                    var rotation = Math.round( heading.magneticHeading ) + "deg";
                        $("#ball").css("-webkit-transform","rotate("+rotation+")");
                        $("#ball").css("-moz-transform","rotate("+rotation+")");
            
                },function (error){
                    console.log("error");
                },options);
                $(this).val("Stop Compass");
            }else{
                navigator.compass.clearWatch(watchID);
                watchID = 0;
                $(this).val("Start Compass");
            }
        });
        
    });