We Keep Coding

My hover popup is flickering and moving when it shouldn't

Trying to create a popup that will show when hovering over an element. However it flickers and moves around when I move my mouse inside the element. It should also stay open if the mouse moves over the popup.
Trying to do this without library cheats like jQuery. You don't learn if you use them.
If you hover your mouse over one of the tags below, that's exactly what I'm trying to create.
Think the error is somewhere in this code:
function showPopup(e) {
var popup = document.getElementById('popup');
if (popup.style.display == 'none') {
popup.style.display = 'block';
var bodyRect = document.body.getBoundingClientRect(),
elemRect = e.target.getBoundingClientRect(),
offsetX = elemRect.left - bodyRect.left,
offsetY = elemRect.bottom - bodyRect.top;
popup.style.left = offsetX + 'px';
popup.style.top = offsetY + 'px';
//console.log(e);
}
}
function hidePopup(/*e*/) {
setTimeout(function() {
var popup = document.getElementById('popup');
if (popup.style.display == 'block' && !window.inside_popup) {
popup.style.display = 'none';
window.inside_popup = false;
console.log('hide');
} else {
setTimeout(hidePopup, 50); // try a little later
}
}, 50); // Give the events ability to catch up and tell us the mouse is inside the popup
}
var targ = document.querySelector('ul li')
targ.addEventListener('mouseover', showPopup);
targ.addEventListener('mouseout', hidePopup);
Full javascript code with a real test element:
https://jsfiddle.net/g8wvae8o/

As #epascarello said, mouseleave and mouseenter are what you're looking for. There's no need for setTimeout here either. In addition, you're targeting every li on the page (is that intentional?) I recommend targeting a specific class of element to reduce flickering.
This is close, but you'll need to massage the positioning.
function createPopup() {
var container = document.createElement('div');
container.id = 'popup';
container.style.width = '500px';
container.style.height = '700px';
container.style.display = 'none';
container.style.position = 'absolute';
container.style.borderRadius = '2px';
container.style.border = '1px solid #242729';
container.style.backgroundColor = '#535a60';
container.style.color = '#e4e6e8';
container.style.zIndex = '9999999';
container.addEventListener('xmouseenter', function() {
window.inside_popup = true;
//console.log('window.inside_popup = true;');
});
container.addEventListener('xmouseleave', function() {
window.inside_popup = false;
//console.log('window.inside_popup = false;');
});
container.appendChild(document.createTextNode('This is a test'));
(document.body || document.documentElement).appendChild(container);
}
window.inside_popup = false;
createPopup();
function showPopup(e) {
var popup = document.getElementById('popup');
if (popup.style.display == 'none') {
popup.style.display = 'block';
}
}
function hidePopup(/*e*/) {
console.log('hiding')
popup.style.display = 'none';
window.inside_popup = false;
}
var bodyRect = document.body.getBoundingClientRect()
function updatePopup(e) {
var elemRect = e.target.getBoundingClientRect(),
offsetY = elemRect.bottom - bodyRect.top,
offsetX = elemRect.left - bodyRect.left;
popup.style.left = (e.clientX + offsetX) + 'px';
popup.style.top = offsetY + 'px';
}
var targ = document.querySelector('ul li')
targ.addEventListener('mouseenter', showPopup);
targ.addEventListener('mouseleave', hidePopup);
targ.addEventListener('mousemove', updatePopup)
Fiddle

Here's a pure CSS solution (I only use JS to create the popup elements)
window.addEventListener("load", function () {
var els = document.querySelectorAll("li");
els.forEach(el => {
var popup = document.createElement("div");
popup.innerHTML = el.getAttribute("popup");
popup.className = "popup";
el.appendChild(popup);
});
});
*[popup]:hover > .popup {
border: 1px solid #fff;
padding: 0.5em;
width: 400px;
height: auto
}
.popup {
overflow: hidden;
box-sizing: border-box;
background-color: black;
color: #ccc;
border-radius: 3px;
position: absolute;
height: 0px;
}
li {
margin: 2em 0
}
<ul>
<li popup="Some more info about this product">Move the mouse here</li>
<li popup="Some more info about the 2nd product">Some other product</li>
</ul>
The key to this is that the popup is a child of the element that is hovered, thus moving the mouse over the popup still counts as hovering the element.

Dom html javascript about onclick

I want to generate five image imgs first in left side, then remove the lastchild of it and copy the rest to the right side. If user clicks the extra img in left side, then clear all and generate more 5(10) img in left and copy 9 to the right side, and so on. If user clicks the wrong place, alert ("game over").Here is my code:
<html>
<head>
<style>
img{
position: absolute;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
function generateFaces(){
var theLeftSide = document.getElementById("leftSide");
for (var i = 0; i < numberOfFaces; i++){
var img = document.createElement("img");
img.src = "smile.png";
var randomTop = Math.random() * 400;
var randomLeft = Math.random() * 400;
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
theLeftSide.appendChild(img);
}
var theRightSide = document.getElementById("rightSide");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightSide").appendChild(leftSideImages);
var theBody = document.getElementByTagName("body")[0];
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
while (theBody.firstChild){
theBody.removeChild(theBody.firstChild);
}
numberOfFaces += 5;
generateFaces();
}
theBody.onclick = function gameover(){
alert("Game Over");
thBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>
</html>
I could generate and clone at first time, but when I click, nothing happens, so what is the problem?

This may be a typing error.
var theBody = document.getElementsByTagName("body")[0];
your code: var theBody = document.getElementByTagName("body")[0];
I suggest to use a good editor for html. I fixed the error with Jetbrain phpStorm but better ones may exist.

Bellow is a modified version that worked for me. Notice that in this version I added the events on all children instead of the whole document body. I don't know but for me it feels more accurate not to end the game on a user clicks on a white space for example.
<html>
<head>
<style>
img{
position: absolute;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
var theBody;
var theLeftSide;
var theRightSide;
function generateFaces(){
theBody = document.getElementsByTagName("body")[0];
theLeftSide = document.getElementById("leftSide");
theRightSide = document.getElementById("rightSide");
for (var i = 0; i < numberOfFaces; i++){
var img = document.createElement("img");
img.src = "smile.png";
var randomTop = Math.random() * 400;
var randomLeft = Math.random() * 400;
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
if(theLeftSide != null)
theLeftSide.appendChild(img);
else
{
alert("Game Over");
return;
}
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightSide").appendChild(leftSideImages);
addEvents();
}
function addEvents(){
for(var i=0; i < theLeftSide.childNodes.length; i++){
theLeftSide.childNodes[i].onclick = nextLevel;
}
}
function removeEvents(){
for(var i=0; i < theLeftSide.childNodes.length; i++){
theLeftSide.childNodes[i].onclick = null;
}
}
function nextLevel(event){
if(this == theLeftSide.lastChild){
event.stopPropagation();
theLeftSide.innerHTML = "";
theRightSide.innerHTML = "";
numberOfFaces += 5;
generateFaces();
}
else
{
alert("Game Over");
removeEvents();
}
}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>
</html>

Some div(s) not displaying when using createElement and appendChild

I am trying to create 4 div(s) that are supposed to have a width of 5px and sit at the top, bottom, left and right margins of the viewport, essentially acting all together as a frame or border to the page.
Here is my code:
function border () {
edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
}
For some reason, when calling the function, the left and right divs (i.e. edgeL and edgeR) are displayed properly, but there is no trace of edgeT and edgeB (top and bottom ones). I cannot understand why since the code is exactly the same for all four of them. FYI the problem is relevant in both Chrome and Firefox.
I know I could use CSS to achieve the same result, but since this is mostly a learning exercise I would still like to understand what is causing the issue in this case.
Thank you all in advance for your help.
Regards,

You should define for the top and bottom divs width: 100% and height: 5px (they're aligned horizontally) and for the left and right divs width: 5px and height: 100% (aligned vertically).
var edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.top = 0;
edgeT.style.left = 0;
edgeT.style.width = "100%";
edgeT.style.height = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
var edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.bottom = 0;
edgeB.style.left = 0;
edgeB.style.width = "100%";
edgeB.style.height = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
var edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.width = "5px";
edgeL.style.height = "100%";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
var edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.right = 0;
edgeR.style.top = 0;
edgeR.style.width = "5px";
edgeR.style.height = "100%";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);

If you want to see the top and the bottom then you need to give them a height, not a width.

How to clone the contents of a div into another div with JavaScript?

I want to clone the images of the div leftSide into the div rightSide. On each click on the body the images on the left div should be cloned into the right div. But I can't get the result with the code I'm doing. Is there any mistake in my code? I want to use JavaScript.
Here's my code:
var theLeftSide = document.getElementById("leftSide");
var width = 500; var height = 500;
top_position = 0; var left_position = 0,
var numberOfFaces = 5;
var theRightSide = document.getElementById("rightSide");
var leftSideImages = theLeftSide.cloneNode(true);
document.getElementById("rightSide").appendChild(leftSideImages);
for (var i = 0; i < 5; i++) {
createElement(i);
numberOfFaces += 5;
function createElement() {
var image = document.createElement('img');
image.src = "smile.png";
image.style.position = 'absolute';
image.style.top = top_position + "px";
image.style.left = left_position + "px";
theLeftSide.appendChild(image);
top_position = Math.random() * 500 ;
left_position = Math.random() * 500 ;

Here is a simple example that clones an HTMLElement in vanilla javascript:
additional information can be found in MDN
function CloneCtrl() {
'use strict';
var self = this;
self.source = document.querySelector('.source');
self.target = document.querySelector('.target');
self.cloneSource = function(event) {
var clone = self.source.cloneNode(true);
self.target.appendChild(clone);
}
document
.getElementById('cloneBtn')
.addEventListener('click', self.cloneSource)
;
}
document.addEventListener('DOMContentLoaded', CloneCtrl);
.source {
background: lightseagreen;
width: 100px;
height: 100px;
line-height: 100px;
overflow: hidden;
margin: 5px;
display: inline-block;
text-align: center;
color: #fff;
}
.target {
border: 1px solid lightcoral;
min-height: 110px;
}
<div><button id="cloneBtn">Clone Source</button></div>
<div class="source">SOURCE</div>
<hr>
<div class="target"></div>

With jQuery, you can do it kike that:
$('#div2').html($('#div1').html());
which is found from this question: Copy the content of a div into another div.
You don't actually provide many details, thus the best I can post, hope it helps!!

you could simply try this if you have second div on page.
document.getElementById("SecondDv").innerHTML = document.getElementById("FirstDv").innerHTML;
This will copy whatever is there in FirstDiv to Second. lmk if it works.

Embed Button on image using DOM

I want to embed button on image using dom. There will be multiple images having multiple button on it which deletes image on click.
I want something like this - JSFiddle
Code I tried:
var div = document.createElement('div');
var parent = document.getElementById('images1');
var btn = document.createElement('input');
btn.type = 'button';
btn.className="multiple",
div.style.cssText = "position: relative; margin-bottom: 10px ; width: 100%;";
btn.style.cssText = " position: absolute; top: 10px; background-image: url(http://totravelistolearn.in/wp-content/themes/travel/images/cross-512.png); width: 20px; height: 20px; border: 0; background-size: 100%; background-repeat: no-repeat;";
//textbox.placeholder = 'Add details about attached Image';
//btn.value = "Remove";
btn.onclick = removeImage;
img = new Image();
img.style.display = 'block';
img.className = 'hi1';
img.style.cssText = 'height: 100px; width: 100px; position: relative;';
img.src = results[i];
div.appendChild(div);
div.appendChild(img);
div.appendChild(btn);
Function to remove image -
function removeImage(){
$$(this).prev("img").remove();
$$(this).remove();
div.parentNode.removeChild(div);
}

you need to use class instead of id, also closest() will do the job for you: DEMO
$('.myButton').click(function(){
$(this).closest('.MyImage').remove();
});

On button click, you can remove the div that contains that image and button, like this :
$('.myButton').on('click', function() {
$(this).closest('div.MyImage').remove();
});
As, I wouldn't advice using same id on multiple elements in one page, I have changed them to classes and then worked through that. I'd suggest you do the same, if your use-case allows you to.
Here is the updated Fiddle

As I Understand , written this code please check once.
function createItem() {
div = document.createElement("div");
div.setAttribute("class", "parent");
image = document.createElement("img");
image.src = "http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg";
image.style.width = "100%";
btn = document.createElement("button");
btn.setAttribute("class", "MyButton");
var textnode = document.createTextNode("X");
btn.appendChild(textnode);
btn.style.position = "absolute";
btn.style.left = "10px";
btn.style.left = "10px";
div.appendChild(image);
div.appendChild(btn);
div.style.width = "100px";
div.style.height = "100px";
div.style.overflow = "hidden";
div.style.marginBottom = "10px";
document.body.appendChild(div);
}
createItem();
createItem();
createItem();
parentDiv = document.getElementsByClassName("parent");
console.log(parentDiv.length);
buttonObject = document.getElementsByClassName("MyButton");
for (var i = 0; i < buttonObject.length; i++) {
buttonObject[i].id = i;
buttonObject[i].onclick = function() {
myId = this.getAttribute("id");
parentDiv[myId].remove()
}
}