Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Level Tool | Labs | Media Upstream</title>
​
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script src="js/custom.js"></script>
</head>
<body>
​
​
<div id="container" >
  <h1>Level Tool</h1>
​
  <div id="level">
    <p id="sorry">Sorry, but your browser isn't supported. <br />Try me in a different browser!</p>
​
    <div id="level-h" class="">
      <div id="h-box">
        <div id="h"></div>
      </div>
    </div><div id="level-v" class="">
      <div id="v-box">
        <div id="v"></div>
      </div>
    </div>
    <div style="clear:both"></div>
  </div>
​
  <div id="notice">For best results use Google Chrome or FireFox <br />on a device with an Accelerometer!</div>
  <div id="props">Created by <a href="http://twitter.com/derekanderson">Derek Anderson</a> @ <a href="http://mediaupstream.com">Media Upstream</a>.<br>Fork on <a href="http://github.com/mediaupstream/levelToolJS">GitHub</a></div>
</div>
​
</body>
</html>
 
.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;}
.button{color:#222;background-color:#eee;border:1px solid #bbb;-webkit-box-shadow:0px 2px 4px #dddddd;-moz-box-shadow:0px 2px 4px #dddddd;box-shadow:0px 2px 4px #dddddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;padding:8px 16px;}
.button:hover{-webkit-box-shadow:0px 2px 4px #b9c8d5;-moz-box-shadow:0px 2px 4px #b9c8d5;box-shadow:0px 2px 4px #b9c8d5;border-color:#aaa;}
.button:active{-webkit-box-shadow:inset 0px 0px 6px #aaaaaa;-moz-box-shadow:inset 0px 0px 6px #aaaaaa;box-shadow:inset 0px 0px 6px #aaaaaa;border-color:#aaa;}
.gradient-bar{background-color:#a8a8a8;background:#e2e2e2;background:-webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#a8a8a8));background:-webkit-linear-gradient(#e2e2e2, #a8a8a8);background-image:-moz-linear-gradient(top, #e2e2e2, #a8a8a8);background-image:-moz-gradient(top, #e2e2e2, #a8a8a8);}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
body{background-color:#DDE4E8;border-top:3px solid #3B5A74;font-family:helvetica,sans-serif;}
a{color:#0EB8CD;text-decoration:none;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;}a:hover{color:#FA1999;font-style:italic;}
#container{margin:0 auto;width:800px;}
#sorry{display:none;text-align:center;font-size:24px;line-height:36px;font-style:italic;color:#CB365D;text-shadow:1px 1px 0 #fff;text-align:center;padding:100px 0;}
#notice,#props{font-size:12px;color:#777;text-shadow:1px 1px 0 #eee;text-align:right;margin:20px 0;font-family:helvetica;line-height:16px;float:right;padding:10px;}
#props{float:left;text-align:left;}
h1{color:#3B5A74;font-size:56px;font-family:Helvetica;font-weight:normal;text-shadow:0px 2px 1px #f3f3f3;margin:20px 0;}
#level{position:relative;margin:0 auto;background-color:#fff;border:1px solid #fff;padding:10px;min-height:280px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 2px 1px #999, 0 4px 1px #888, 0 6px 1px #777, 0 8px 1px #666, 0 12px 17px rgba(0,0,0, 0.4);-moz-box-shadow:0 2px 1px #999, 0 4px 1px #888, 0 6px 1px #777, 0 8px 1px #666, 0 12px 17px rgba(0,0,0, 0.4);box-shadow:0 2px 1px #999, 0 4px 1px #888, 0 6px 1px #777, 0 8px 1px #666, 0 12px 17px rgba(0,0,0, 0.4);background:#ffffff;background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));background:-webkit-linear-gradient(#ffffff, #eeeeee);background-image:-moz-linear-gradient(top, #ffffff, #eeeeee);background-image:-moz-gradient(top, #ffffff, #eeeeee);}
#level-h,#level-v{width:49.4%;min-height:280px;display:none;float:left;}
#level-h{border-right:1px solid #aaa;}
#level-v{border-left:1px solid #fff;}
#v-box,#h-box{position:relative;border:1px solid #ccc;background-color:#fff;margin:auto;z-index:300;overflow:hidden;border:8px solid #728300;-moz-border-radius:120px;-webkit-border-radius:120px;border-radius:120px;background:#e6f0a3;background:-moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e6f0a3), color-stop(50%, #d2e638), color-stop(51%, #c3d825), color-stop(100%, #dbf043));background:-webkit-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-o-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-ms-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);-webkit-box-shadow:inset 0 2px 10px rgba(0,0,0, 0.18), 0 3px 2px rgba(0,0,0, 0.3);-moz-box-shadow:inset 0 2px 10px rgba(0,0,0, 0.18), 0 3px 2px rgba(0,0,0, 0.3);box-shadow:inset 0 2px 10px rgba(0,0,0, 0.18), 0 3px 2px rgba(0,0,0, 0.3);}#v-box:after,#h-box:after{content:"";position:absolute;display:block;top:2%;left:9%;right:9%;height:15px;background:rgba(255, 255, 255, 0);background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));background:-webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));background-image:-moz-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
#v-box:before,#h-box:before{content:"";position:absolute;display:block;border:1px solid rgba(0, 0, 0, 0.35);width:74px;height:74px;z-index:900;}
#h-box{width:250px;height:80px;margin-top:80px;}#h-box:before{top:3px;left:85px;border-width:0 1px;}
#v-box{width:80px;height:250px;background:#e6f0a3;background:-moz-linear-gradient(left, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #e6f0a3), color-stop(50%, #d2e638), color-stop(51%, #c3d825), color-stop(100%, #dbf043));background:-webkit-linear-gradient(left, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-o-linear-gradient(left, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:-ms-linear-gradient(left, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);background:linear-gradient(left, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);}#v-box:after{left:30%;right:30%;}
#v-box:before{top:85px;left:3px;border-width:1px 0;}
#v,#h{z-index:800;overflow:hidden;position:absolute;display:block;-moz-border-radius:300px;-webkit-border-radius:300px;border-radius:300px;background:rgba(255, 255, 255, 0.5);background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.86)));background:-webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.86));background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.86));background-image:-moz-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.86));-webkit-box-shadow:inset 0 -2px 10px rgba(0,0,0, 0.2), inset 0px -2px 3px rgba(0,0,0, 0.35), 0 1px 4px rgba(0,0,0, 0.12);-moz-box-shadow:inset 0 -2px 10px rgba(0,0,0, 0.2), inset 0px -2px 3px rgba(0,0,0, 0.35), 0 1px 4px rgba(0,0,0, 0.12);box-shadow:inset 0 -2px 10px rgba(0,0,0, 0.2), inset 0px -2px 3px rgba(0,0,0, 0.35), 0 1px 4px rgba(0,0,0, 0.12);width:74px;height:74px;margin:3px;}#v:after,#h:after{content:"";display:block;position:absolute;width:30px;height:30px;left:20px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;background-color:rgba(255, 255, 255, 0.3);-webkit-box-shadow:0 0 8px rgba(255, 255, 255, 0.3);-moz-box-shadow:0 0 8px rgba(255, 255, 255, 0.3);box-shadow:0 0 8px rgba(255, 255, 255, 0.3);}
​
 
/**
 *  levelTool - A simple level tool, utilizing `deviceorientation`
 *  
 *  Copyright 2011 Derek Anderson | Media Upstream
 *  MIT License
 */
var levelTool = {};
​
// Cache results of 180 / PI for FF fix
levelTool.pf = (180 / Math.PI);
​
// calculate the x / y (beta / gamma) changes and update the UI
levelTool.run = function(e){
  if (!e.gamma && !e.beta) { 
    e.gamma = -(e.x * levelTool.pf);
    e.beta = -(e.y * levelTool.pf);
  }
  var v = (e.beta ) + 32;
  var h = (e.gamma) + 32;
  
  v = (v > 68) ? 68 : v;
  v = (v < 0) ? 0 : v;
  
  h = (h > 68) ? 68 : h;
  h = (h < 0) ? 0 : h;
  
  levelTool.v.css('top', v +'%');
  levelTool.h.css('left', h +'%');
};
​
​
​
// Attach the event listeners and dislpay message to unsupported browsers
levelTool.init = function(){
  
  levelTool.v = $('#v');
  levelTool.h = $('#h');
    
  window.addEventListener('deviceorientation', levelTool.run, false);
  window.addEventListener('MozOrientation', levelTool.run, false);
​
  // "Is Device Orientation There?", "Hell No! ... Device Orientation don't live here no more!"
  if (!('ondeviceorientation' in window) && !(window.onmozorientation)) {
    $('#sorry').fadeIn();
  } else {
    $('#level-h, #level-v').fadeIn('fast');
  }
};
​
// helpers
levelTool.percentOf = function(a, b){ return Math.floor((a/b)*100); };
levelTool.toFloat = function(num){ return (num/100); };
levelTool.invertPercent = function(num){ return (100-num); };
​
​
$(function(){
  // initialize our Tool.
  levelTool.init();
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers