andilabs/jsbin..html

## 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>

## 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);
  }
};
	<!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>
	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);
	}
	};