Screen/Viewport sizes and events (hammer.js)

by riddla

HTML

<script src="http://eightmedia.github.io/hammer.js/dist/jquery.hammer.min.js"></script>
<div id="target">hit me</div>

<table>
    <tr>
        <td id="screen" class="results">
            <div>
                <h4>Screen/Viewport</h4>
                <pre></pre>
            </div>
        </td>
        <td id="result" class="results">
            <div>
                <h4>Event</h4>
                <pre></pre>
            </div>
        </td>
    </tr>
    <tr>
        <td id="gesture" class="results">
            <div>
                <h4>Gesture</h4>
                <pre></pre>
            </div>
        </td>
    </tr>
</table>

CSS

body { font-family:sans-serif; }

pre { margin:0; }

#target {
    background:green;
    color:#FFF;
    text-align:center;
    font-size:32px;
    cursor:pointer;
    padding:0.2em;
}
#target:hover {
    background:forestgreen;
}

.results {
    font-size:18px;
    vertical-align:top;
    padding-right:2em;
}

JavaScript

var screen = {
    'document_height':$(document).height(),
    'document_width':$(document).width()
};
$('#screen pre').text(JSON.stringify(screen, null, 2));

var hammertime = $("#target").hammer({
    stop_browser_behavior: {
			// this also triggers onselectstart=false for IE
			userSelect: 'false',
			// this makes the element blocking in IE10 >, you could experiment with the value
			// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
			touchAction: 'false',
			touchCallout: 'false',
			contentZooming: 'none',
			userDrag: 'none',
			tapHighlightColor: 'rgba(0,0,0,0)'
		}
});

debugger;

var events = 'touch release hold tap doubletap dragstart drag dragend dragleft dragright dragup dragdown swipe swipeleft swiperight swipeup swipedown transformstart transform transformend rotate pinch pinchin pinchout';

// the whole area
hammertime.on(events, function(e) {
  var eventData = {
        'type': e.type,
        'offsetX':e.offsetX,
        'offsetY':e.offsetY,
        'pageX':e.pageX,
        'pageY':e.pageY
    };
    $('#result pre').text(JSON.stringify(eventData, null, 2));
    
    var gesture = e.gesture;
    var gestureData = {
        'pointerType': gesture.pointerType,
        'eventType':gesture.eventType
    };
    $('#gesture pre').text(JSON.stringify(gestureData, null, 2));
});