Skip to content

Instantly share code, notes, and snippets.

Created April 20, 2017 19:11
Show Gist options
  • Save anonymous/c49b790d1198b3d442234429118f4670 to your computer and use it in GitHub Desktop.
Save anonymous/c49b790d1198b3d442234429118f4670 to your computer and use it in GitHub Desktop.
<style id="jsbin-css">
#contentContainer {
/*position: relative;*/
/*left:100px;*/
width: 500px;
height: 300px;
border: 1px black solid;
/*overflow: hidden;*/
background-color: #EEE;
cursor: auto;
}
#thing {
position: relative;
width:40px;
height:40px;
/*left: 50px;*/
/*top: 50px;*/
background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
background-repeat: no-repeat;
}
</style>
<div id="contentContainer">
<div id="thing">
</div>
</div>
<script id="jsbin-javascript">
var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
var cln = theThing.cloneNode(true);
//cln.id = "new" + i++;
console.log(cln.id);
document.querySelector("body").appendChild(cln);
var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
cln.style.position = "absolute";
cln.style.left = xPosition + "px";
cln.style.top = yPosition + "px";
});
container.addEventListener("mousemove", function(event) {
var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
);
</script>
<script id="jsbin-source-html" type="text/html"><div id="contentContainer">
<div id="thing">
</div>
</div>
</script>
<script id="jsbin-source-css" type="text/css">#contentContainer {
/*position: relative;*/
/*left:100px;*/
width: 500px;
height: 300px;
border: 1px black solid;
/*overflow: hidden;*/
background-color: #EEE;
cursor: auto;
}
#thing {
position: relative;
width:40px;
height:40px;
/*left: 50px;*/
/*top: 50px;*/
background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
background-repeat: no-repeat;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
var cln = theThing.cloneNode(true);
//cln.id = "new" + i++;
console.log(cln.id);
document.querySelector("body").appendChild(cln);
var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
cln.style.position = "absolute";
cln.style.left = xPosition + "px";
cln.style.top = yPosition + "px";
});
container.addEventListener("mousemove", function(event) {
var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
);</script>
#contentContainer {
/*position: relative;*/
/*left:100px;*/
width: 500px;
height: 300px;
border: 1px black solid;
/*overflow: hidden;*/
background-color: #EEE;
cursor: auto;
}
#thing {
position: relative;
width:40px;
height:40px;
/*left: 50px;*/
/*top: 50px;*/
background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
background-repeat: no-repeat;
}
var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
var cln = theThing.cloneNode(true);
//cln.id = "new" + i++;
console.log(cln.id);
document.querySelector("body").appendChild(cln);
var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
cln.style.position = "absolute";
cln.style.left = xPosition + "px";
cln.style.top = yPosition + "px";
});
container.addEventListener("mousemove", function(event) {
var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
// in case of a wide border, the boarder-width needs to be considered in the formula above
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment