JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<script src="http://mediabeez.ws/code/libraries_rv/box2djs-0.2.0-jquery/js/box2djs.0.2.0.jquery.min.js"></script>
<link rel="stylesheet" href="http://www.discovertec.com/css/main.css">
<div id="outerWrap" class="cf">
    <div id="innerWrap" class="cf">
      <div id="container" class="cf">
        <header id="header" class="cf">
          <div id="topLogo">
            <a href="/"><img src="/img/DiscoverTec-Logo.png" alt="DiscoverTec Logo" /></a>
          </div>
          <nav id="nav" class="cf">
                <ul class="cf">
      <li class="active">
        <a href="/about.aspx">About</a>
      </li>
      <li>
        <a href="/services.aspx">Services</a>
      </li>
      <li>
        <a href="/work.aspx">Work</a>
      </li>
      <li>
        <a href="/contact.aspx">Contact</a>
      </li>
    </ul>

          </nav>  
        </header>
        <hr />
        <!-- <div id="breadCrumbs" class="cf">
      <a href="/">Home</a>
      <a href="/about.aspx">About</a>
      <a href="/about/meet-our-team.aspx">Meet Our Team</a>
<span>Evan Sharp</span>
</div>

 -->
        
        
          

  
  <nav id="subnav" class="cf">
    <ul class="cf">
    </ul>
  </nav>
<!-- needs to be MVC sub-navigation -->
  <div id="breadCrumbs" class="cf">
      <a href="/">Home</a>
      <a href="/about.aspx">About</a>
      <a href="/about/meet-our-team.aspx">Meet Our Team</a>
<span>Evan Sharp</span>
</div>


  
<div id="content" class="textpage cf">
  <section>
    
    <header id="contentHeader">  
        <h1>Evan Sharp</h1>
    </header>
    
    
      
    

    
    
      
    

    
    <p class="big grey">Designer</p>
    <div class="tm-left">
              <img src="/media/9222/large-blank.jpg" alt="" class="tm-tn-large-photo"/>
        <div class="tm-tn cf">
                <a class="tm-photo" data-image="/media/9239/esharp.jpg" style="background-image:url(/media/6375/evan.jpg);">
                    <div class="tm-photo-bw"...

JavaScript

$(function() {
    var delta = [0, 0];
    var stage = [window.screenX, window.screenY, window.innerWidth, window.innerHeight];
    getBrowserDimensions();
    var world, iterations = 1, timeStep = 1 / 25, walls = [], wall_thickness = 200, wallsSetted = false, mouseJoint, mouse = {
        x : 0,
        y : 0
    }, mouseOnClick = [], elements = [], bodies = [], properties = [], query, page = 0, gWebSearch, gImageSearch, imFeelingLuckyMode = false, resultBodies = [], gravity = {
        x : 0,
        y : 1
    };
    init();
});
function init() {
    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    // document.ondblclick = onDocumentDoubleClick;

    document.addEventListener('keyup', onDocumentKeyUp, false);

    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);
    document.addEventListener('touchend', onDocumentTouchEnd, false);

    window.addEventListener('deviceorientation', onWindowDeviceOrientation, false);

    // init box2d

    worldAABB = new b2AABB();
    worldAABB.minVertex.Set(-200, -200);
    worldAABB.maxVertex.Set(window.innerWidth + 200, window.innerHeight + 200);

    world = new b2World(worldAABB, new b2Vec2(0, 0), true);

    // walls
    setWalls();

    // Get box2d elements

    elements = $("body *");

    for (var i = 0; i < elements.length; i++) {

        properties[i] = getElementProperties(elements[i]);

    }

    for (var i = 0; i < elements.length; i++) {

        var element = elements[i];
        element.style.position = 'absolute';
        element.style.left = properties[i][0] + 'px';
        element.style.top = properties[i][1] + 'px';
        element.style.width = properties[i][2] + 'px';
        element.addEventListener('mousedown', onElementMouseDown, false);
       ...