andilabs
8/1/2013 - 10:32 AM

jsbin.edajur.html

jsbin.edajur.js
content_copyfile_download
window.onload = function() {
  
  var mousePos,windowSize,
      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, 100); // setInterval repeats every X ms

  function handleMouseMove(event) {
      event = event || window.event; // IE-ism
      mousePos = {
          x: event.clientX,
          y: event.clientY
      };
    windowSize = {
          x:  document.documentElement.clientWidth,
          y:  document.documentElement.clientHeight
    };
  } 
  

  function getMousePosition() {
      var pos = mousePos;
      var win = windowSize;
      if (!pos) {
          // We haven't seen any movement yet
          pos = {x: "?", y: "?"};
      }
    if (!windowSize){
      windowSize = {x: "?", y: "?"};
    }
      posDisplay.innerHTML = "(" + pos.x + "," + pos.y + ")";
      counterDisplay.innerHTML = ++counter;
      
      browserWidth.innerHTML=windowSize.x;
      browserHeight.innerHTML=windowSize.y;
  }
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
};
jsbin.edajur.html
content_copyfile_download
<!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>