iPad "Desktop" App

by steveukx

HTML

<meta name="viewport" content="width=1024, initial-scale=1, user-scalable=no">

<header>
    <h1>Some Title</h1>
</header>
<section class="sitecontent currentcontent">AAA</section>
<section class="sitecontent nextcontent">BBB</section>
<section class="sitecontent nextcontent">CCC</section>
<section class="sitecontent nextcontent">DDD</section>
<footer>
    <ul>
        <li>Some Navigation Item</li>
        <li>Some Navigation Item</li>
        <li>Some Navigation Item</li>
        <li>Some Navigation blah</li>
    </ul>
</footer>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: arial, helvetica;
}

header {
    height: 50px;
    background: black;
}
header h1 {
    line-height: 50px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    padding: 0 5px;
}
footer {
    height: 50px;
    background: #000;
    position: absolute;
    bottom: 0;
    width: 100%;
}
footer ul {
    margin: 0; padding: 0;
    display: table;
    list-style-type: none;
    width: 100%;
}
footer li {
    display: table-cell;
    text-align: center;
    color: #fff;
}

.sitecontent {
    position: absolute;
    top: 50px;
    bottom: 50px;
    overflow: hidden;
    z-index: 100;
    left: 0;
    right: 0;
}
.sitecontent.nextcontent {
    -webkit-transform: translateX(100%);
}
.sitecontent.previouscontent {
    -webkit-transform: translateX(-100%);
}
.sitecontent:nth-of-type(1) { background-color: yellow; }
.sitecontent:nth-of-type(2) { background-color: orange; }
.sitecontent:nth-of-type(3) { background-color: #ccccff; }
.sitecontent:nth-of-type(4) { background-color: #ccffcc; }

.sitecontent.animatingcontent {
    z-index: 1000;
    -webkit-transition: -webkit-transform 0.5s;
}

JavaScript

jQuery(function() {


(function(IG) {

       
   jQuery.event.special.touchmovenorth = {};
   jQuery.event.special.touchmovesouth = {};
   jQuery.event.special.touchmoveeast = {};
   jQuery.event.special.touchmovewest = {};
   
    
   function TouchMonitor(id, x, y, el) {
       console.log("TouchMonitor " + id + ': ' + el.nodeName);
      
      this._id = id;
      this._startX = x;
      this._startY = y;
      this._latestX = x;
      this._latestY = y;
      this._el = jQuery(el);
      
      this.fireMouseEvent('mousedown');
   }

   TouchMonitor.prototype.fireMouseEvent = function(eventType, asGesture) {
      //console.log("TouchMonitor.fireMouseEvent " + eventType);
      
      if(!asGesture) {
         this._el.trigger(eventType);
      }
      else {
         this._el.trigger(eventType);
      }
   };

   TouchMonitor.prototype.touchMoved = function(x, y) {
      var horizontalEvent = this._handleHorizontalMove(x),
          verticalEvent = this._handleVerticalMove(y);
      
      horizontalEvent && this.fireMouseEvent(horizontalEvent, true);
      verticalEvent && this.fireMouseEvent(verticalEvent, true);
   };


   TouchMonitor.prototype._handleVerticalMove = function(y) {
      var delta = this._latestY - y;
      if(Math.abs(delta) >= TouchMonitor.MOVE_GRID_SIZE) {
         this._latestY = y;
         if(delta > 0) {
            return TouchMonitor.GESTURE_NORTH;
         }
         else {
            return TouchMonitor.GESTURE_SOUTH;
         }
      }
      
      return '';
   };

   TouchMonitor.prototype._handleHorizontalMove = function(x) {
      var delta = this._latestX - x;
      if(Math.abs(delta) >= TouchMonitor.MOVE_GRID_SIZE) {
         this._latestX = x;
         if(delta > 0) {
            return TouchMonitor.GESTURE_EAST;
         }
         else {
            return TouchMonitor.GESTURE_WEST;
         }
      }
      
      return '';
   };

   TouchMonitor.prototype.touchStopped = function(element) {
      if(element ===...