Screen/Viewport sizes and events

by riddla

HTML

<div id="target">hit me</div>

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

CSS

body { font-family:sans-serif; }

pre { margin:0; }

#target {
    width: 100px;
    height:100px;
    background:green;
    color:#FFF;
    text-align:center;
    vertical-align:middle;
    font-size:32px;
}

#result,
#screen {
    font-size:18px;
    vertical-align:top;
    padding-right:2em;
}

#result pre {
    
}

JavaScript

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

var events = 'click contextmenu';
$('#target').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));
});