Pors&Rao Mobile POC

by godfrzero

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="container"><div class="child">
    <img src="http://www.porsandrao.com/wp-content/uploads/2014/12/13_wet_sunc.png" />
</div><div class="child">
    <img src="http://www.porsandrao.com/wp-content/uploads/2014/12/12_islander11.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2014/12/11_handheld.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2014/01/10_NisseTV1.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/10/9_decoy2.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/11/8_teddy1.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/10/7_sun_shadow2.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/11/6_heavy_hat1.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/11/5_split_knife1.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/10/4_missing_person2.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/10/3_pygmies2.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/11/2_uncle_command1.png" />
</div><div class="child">
  <img src="http://www.porsandrao.com/wp-content/uploads/2011/11/1_uncle_phone1.png" />
</div></div>

CSS

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: url('http://www.porsandrao.com/wp-content/themes/pors_rao/images/background.png') top left #bababa;
}

.child {
    margin: 0;
    height: 100%;
    padding: 0 30px;
    font-size: 40px;
    line-height: 100%;
    text-align: center;
    vertical-align: top;
    display: inline-block;
}

#container {
    width: auto;
    height: 100%;
    min-width: 100%;
    padding: 0 300px;
    overflow: hidden;
    text-align: center;
}

JavaScript

$(function () {
    var $scrollContainer = $('#container');
    var $scrollChildren = $scrollContainer.children();
    var $body = $('body');

    var bodyWidth = $body.width();
    var childWidth = $scrollChildren.eq(0).outerWidth();
    var containerWidth = (function() {
        // Add up the widths of all the children
        var totalWidth = 0;
        $scrollChildren.each(function() {
            totalWidth += $(this).outerWidth();
        });
        
        return totalWidth
    })();

    console.log($scrollContainer, $scrollChildren, childWidth);
    console.log('Setting $scrollContainer width to', containerWidth);

    $scrollContainer
        // Set width to allow all children to be on the same line
        .width(containerWidth)
    
    // Get the new width with added padding
    containerWidth = $scrollContainer.outerWidth();
    
    // By default, mouse pointer position determines scroll position.
    function bindPointerPosition() {
        // Code in here takes care of binding scroll position to mouse-x
    }
    
    // However, on touch-enabled devices we should allow swiping to scroll
    // With this HTML structure, this is pretty easy. We just need to 
    // remove the scroll-x to mouse-x binding.
    function unbindPointerPosition() {
        
    }
    
    // By default, the pointer is tracked
    // But if a touch event is detected, we then call unbindPointerPosition
    // to allow the user to swipe and navigate
    (function() {
        $body.on('mousemove', function(e) {
          if($scrollContainer.outerWidth() > bodyWidth) {
            var mouseX = e.screenX;
            var mousePercentX = mouseX / bodyWidth;
            var destX = -(((containerWidth - bodyWidth) - bodyWidth) * mousePercentX);
            var scrollLeft = mouseX - destX;
              
            $body.stop().animate({scrollLeft: scrollLeft}, 600, 'easeOutCirc');
          }
        });
    })();
    
    // However, if a mouse event is detected after that,...