Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/index.html Secret

Forked from jasondavies/index.html
Last active February 9, 2016 01:15
Show Gist options
  • Save mbostock/1865422 to your computer and use it in GitHub Desktop.
Save mbostock/1865422 to your computer and use it in GitHub Desktop.
Download ZIP
offsetX / offsetY
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
border: solid 3px steelblue;
cursor: crosshair;
}
#parent {
cursor: crosshair;
border: solid 7px steelblue;
position: relative;
margin: 29px auto;
padding: 31px;
width: 800px;
height: 400px;
background: #eee;
}
#child {
position: absolute;
border: solid 13px steelblue;
margin: 17px;
padding: 23px;
top: 100px;
left: 100px;
width: 200px;
height: 100px;
background: #ccc;
}
#circle {
position: absolute;
pointer-events: none;
border-radius: 12px;
margin-left: -12px;
margin-top: -12px;
width: 24px;
height: 24px;
background: red;
}
#small-circle {
position: absolute;
pointer-events: none;
background: black;
border-radius: 6px;
top: 12px;
left: 12px;
margin-left: -4px;
margin-top: -4px;
width: 8px;
height: 8px;
}
#square {
position: absolute;
top: -30px;
left: -30px;
width: 10px;
height: 10px;
background: green;
}
</style>
<div id="parent">
<div id="offset"></div>
<div id="child">
<div id="circle">
<div id="small-circle"></div>
</div>
<div id="square"></div>
</div>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
d3.select("#child").on("mousemove", function() {
var rect = this.getBoundingClientRect(),
ox = d3.event.pageX - rect.left - this.clientLeft - window.pageXOffset,
oy = d3.event.pageY - rect.top - this.clientTop - window.pageYOffset;
d3.select("#offset").text(ox + "," + oy);
d3.select("#circle")
.style("left", ox + "px")
.style("top", oy + "px");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment