Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
#dom-event-source{position:relative;height:200px;border:dashed 5px #ccc;text-align:center;cursor:crosshair}#dom-event-source p{display:block;position:absolute;top:50%;left:0;right:0;line-height:2ex;margin-top:-1ex}#dom-event-output{position:relative;height:100px;margin-top:20px}#dom-event-output .left{position:absolute;top:1%;bottom:1%;left:1%;right:51%;background-color:#aeb;text-align:center}#dom-event-output .left p{display:block;position:absolute;top:50%;left:0;right:0;line-height:50px;margin-top:-25px}#dom-event-output .right{position:absolute;top:1%;bottom:1%;left:51%;right:1%;background-color:#aef;text-align:center}#dom-event-output .right p{display:block;position:absolute;top:50%;left:0;right:0;line-height:50px;margin-top:-25px}
​
  </style>
</head>
<body>
  <div id="dom-event-source">
    </div>
​
    <div id="dom-event-output">
      <div class="left"><p></p></div>
      <div class="right"><p></p></div>
    </div>
</body>
</html>
 
var sourceElement = document.getElementById("dom-event-source");
var elements = ["#dom-event-output .left p", "#dom-event-output .right p"].map(document.querySelector.bind(document));
var elementRect = sourceElement.getBoundingClientRect();
​
var observers = Rx.Observable.fromEvent(sourceElement, 'mousemove')
.map(e => ({
      x: Math.floor(e.clientX - elementRect.left), 
      y: Math.floor(e.clientY - elementRect.top)
    })
).partition(pos => pos.x < sourceElement.clientWidth / 2);
​
elements.forEach((n, i, a) => 
                 observers[i].subscribe(displayCoordinates.bind(displayCoordinates, n)));
​
function displayCoordinates(element, pos) {
  element.textContent = `(x: ${pos.x}, y: ${pos.y})`;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x