Skip to content

Instantly share code, notes, and snippets.

@andilabs

andilabs/jsbin..html

Created August 1, 2013 09:58
Show Gist options
  • Save andilabs/6130049 to your computer and use it in GitHub Desktop.
Save andilabs/6130049 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin..html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<p>Browser size: <span id="browserWidth"></span> <span id="browserHeight"></span></p>
<p>Mouse position: <span id="posDisplay"></span></p>
<p>Counter: <span id="counterDisplay"></span></p>
</body>
</html>
Raw
jsbin..js
window.onload = function() {
var mousePos,
posDisplay = document.getElementById("posDisplay"),
counterDisplay = document.getElementById("counterDisplay"),
counter = 0;
var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;
window.onmousemove = handleMouseMove;
setInterval(getMousePosition, 1000); // setInterval repeats every X ms
function handleMouseMove(event) {
event = event || window.event; // IE-ism
mousePos = {
x: event.clientX,
y: event.clientY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
pos = {x: "?", y: "?"};
}
posDisplay.innerHTML = "(" + pos.x + "," + pos.y + ")";
counterDisplay.innerHTML = ++counter;
browserWidth.innerHTML=viewportWidth;
browserHeight.innerHTML=viewportHeight;
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment