get x and y pos

by Deborah

HTML

<div id="container" class="container">
      <button id="superButton">find position</button> 
      <div id="info">else</div>
  </div>

CSS

body {
 padding: 10px;
 margin: 10px;    
}

.container {
   padding: 1em;
}

#info {
  display: none;
  padding: 1em;
  margin: 0 1em;
  background: #eeeeee;    
}


button {
 cursor: pointer;
 margin: 1em;
 padding: 5px;
 background: #cccccc;  
 border: 1px solid #cccccc;     
}

button.touched {
  border: 2px solid #ff0099;
}

button.success {
 color: #ffffff;
 background: #ff0099;   
 border: 2px solid #ff0099;    
}

JavaScript

// simplified get x and y pos - works, ie8, calculates body also!
   
var superButton = document.getElementById('superButton'); 

function findPos(id) {
    var el = document.getElementById(id);
    var left = el.offsetLeft; 
    var top = el.offsetTop;
    
    while (el = el.offsetParent)
        left += el.offsetLeft;
    
    el = document.getElementById(id);
    while (el = el.offsetParent)
        top += el.offsetTop;
    
    return [left, top];
}


function clicker() {
    var xy = findPos('superButton');
      var x = xy[0];
      var y = xy[1];
    
    // did click happen?
    superButton.className = "touched";
    
    alert("x is " + x + ", y is " + y);
    
    // did function complete?
    superButton.className = "success";
}

superButton.onclick = clicker;