I have this script that uses a toggle button to show or hide a targeted parent container. There is two correct ways that the parent class container hides by
pressing the toggle button the second time or by clicking outside the parent class container. So it works perfectly but any time I add any thing inside that
parent class container and I click those inside contents it makes the whole parent class container disappear how can I prevent that?
Here is my code
document.addEventListener('DOMContentLoaded', function(){
document.addEventListener('click',closeContainer);
function closeContainer(obj){
var containerVar = document.querySelector('.container');
if(obj.target.className != 'container') {
if (containerVar.style.display === 'flex') {
containerVar.style.display = 'none';
} else if(obj.target.id == 'toggle') {
containerVar.style.display = 'flex';
}
}
}
});
.container{
background-color: orange;
height: 350px;
width: 350px;
margin-left: auto;
margin-right: auto;
display: none;
justify-content: center;
}
.inner-container{
margin-top: 50px;
background-color: red;
height: 200px;
width: 200px;
display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
<div class='inner-container'></div>
</div>
You need to capture click events on your container and stop propagation, then there's no need to check the target in your document's event handler:
document.addEventListener('DOMContentLoaded', function() {
// if click event is inside container, then stop propagation
const container = document.querySelector('.container');
container.addEventListener('click', function(e) {
e.stopPropagation();
});
document.addEventListener('click', closeContainer);
function closeContainer(obj) {
var containerVar = document.querySelector('.container');
if (containerVar.style.display === 'flex') {
containerVar.style.display = 'none';
} else if (obj.target.id == 'toggle') {
containerVar.style.display = 'flex';
}
}
});
.container {
background-color: orange;
height: 350px;
width: 350px;
margin-left: auto;
margin-right: auto;
display: none;
justify-content: center;
}
.inner-container {
margin-top: 50px;
background-color: red;
height: 200px;
width: 200px;
display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
<div class='inner-container'></div>
</div>
Another solution would be to only have one event handler on document and check if the target or any of its ancestors have the container class (similar to jquery's closest method):
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('click', closeContainer);
function closeContainer(obj) {
if (closest(obj.target, '.container')) return;
var containerVar = document.querySelector('.container');
if (containerVar.style.display === 'flex') {
containerVar.style.display = 'none';
} else if (obj.target.id == 'toggle') {
containerVar.style.display = 'flex';
}
}
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
});
.container {
background-color: orange;
height: 350px;
width: 350px;
margin-left: auto;
margin-right: auto;
display: none;
justify-content: center;
}
.inner-container {
margin-top: 50px;
background-color: red;
height: 200px;
width: 200px;
display: inline-block;
}
<button id='toggle'>Toggle</button>
<div class='container'>
<div class='inner-container'></div>
</div>
Related
I have a dropdown menu with mouseover/mouseout handlers for tooltips. The problem is, if the menu is closed while the mouse is over it, mouseout handler does not fire. I can reproduce it with the following example:
const d1 = document.getElementById("d1");
const d2 = document.getElementById("d2");
let d3 = null;
function toggle() {
if (!d3) {
d3 = document.createElement("div");
d3.id = "d3";
d1.appendChild(d3);
} else {
d1.removeChild(d3);
d3 = null;
}
}
d1.addEventListener("mouseover", () => d1.classList.add("hover"));
d1.addEventListener("mouseout", () => d1.classList.remove("hover"));
d1.addEventListener("click", () => toggle());
#d1 { background-color: green; display: inline-block; position: relative; }
#d1.hover { background-color: red; }
#d2 { width: 400px; height: 50px; }
#d3 { position: absolute; width: 400px; height: 300px; background: green; top: 100%; }
<div id="d1">
<div id="d2"></div>
</div>
Clicking on the menu to close it causes the dropdown to get stuck in the red "hover" state.
Is there a workaround for this that doesn't involve checking mouse position when the dropdown closes?
The DOM isn't resizing d1 when d3 is removed, so it still thinks d1 is being hovered over. You need to manually remove the hover class from d1 when d3 is removed, then the DOM will recognize that d1 has shrunk. Add this to the end of the else statement:
d1.classList.remove("hover");
const d1 = document.getElementById("d1");
const d2 = document.getElementById("d2");
let d3 = null;
function toggle() {
if (!d3) {
d3 = document.createElement("div");
d3.id = "d3";
d1.appendChild(d3);
} else {
d1.removeChild(d3);
d3 = null;
d1.classList.remove("hover");
}
}
d1.addEventListener("mouseover", () => d1.classList.add("hover"));
d1.addEventListener("mouseout", () => d1.classList.remove("hover"));
d1.addEventListener("click", () => toggle());
#d1 { background-color: green; display: inline-block; position: relative; }
#d1.hover { background-color: red; }
#d2 { width: 400px; height: 50px; }
#d3 { position: absolute; width: 400px; height: 300px; background: green; top: 100%; }
<div id="d1">
<div id="d2"></div>
</div>
how do I add multiple links to this JavaScript, the JavaScript is an Iframe popup, triggered by an external link, I need to add 3 links to trigger 3 different page popups.
I have studied the JavaScript and tried different ways.I searched stack, and found nothing that could provide a solution.
Any help would be appreciated.
Here is the HTML for using the JavaScript with 1 link.
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
You can use class to refer multiple elements. Select all the elements with the class with querySelectorAll(), then loop through them to attach the event.
You can associate the related link in the a element itself using a custom attribute, then on click you can retrieve that and set that as the popup iframe src.
Try the following way:
document.querySelectorAll('.link').forEach(function(lk){
lk.onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = this.getAttribute('data-link');
console.log(this.getAttribute('data-link'));
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
});
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div>
Click me<br>
Click me 2
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
I'm trying to implement a way to display / hide a div element with vanilla JavaScript triggered by a click event. The hide function works well but I seem to be missing something important when it comes to displaying the div's again. I've verified that the toggler function is working.
Simple sandbox here:
https://codepen.io/pen/eYmOzVe
(function() {
"use strict";
// HTML References
var flags = document.querySelector(".flags");
// Toogle
var toogle = true;
// Flag object
var flagObject = {
init: function(part1, part2, part3, part4, part5) {
this.part1 = part1;
this.part2 = part2;
this.part3 = part3;
this.part4 = part4;
this.part5 = part5;
},
draw: function() {
flags.innerHTML += `
<div id="${this.part1}">
<div class="${this.part2}">
<div class="${this.part3}"></div>
<div class="${this.part4}"></div>
<div class="${this.part5}"></div>
</div>
</div>
`;
},
toogler: function(arg) {
toogle ? flagObject.remove(arg) : flagObject.show(arg);
toogle = !toogle;
},
remove: function(arg) {
if (arg == "1") {
flag1Element.style.visibility = "hidden";
}
if (arg == "2") {
flag2Element.style.visibility = "hidden";
}
},
show: function(arg) {
if (arg == "1") {
flag1Element.style.visibility = "visible";
}
if (arg == "2") {
flag2Element.style.visibility = "visible";
}
}
};
// Create instances of the object
var swedishFlag = Object.create(flagObject);
var japaneseFlag = Object.create(flagObject);
// Init
swedishFlag.init(
"flag1",
"flag-sweden",
"cross-one-sweden",
"cross-two-sweden"
);
japaneseFlag.init("flag2", "flag-japan", "circle-japan");
// Array containing all flags
var allObjects = [swedishFlag, japaneseFlag];
// Draws flags
for (let i = 0; i < allObjects.length; i++) {
allObjects[i].draw();
}
// HTML element refrences
var flag1Element = document.querySelector("#flag1");
var flag2Element = document.querySelector("#flag2");
// Add eventlisteners to remove flags on click
flag1Element.addEventListener("click", function() {
flagObject.toogler(1);
});
flag2Element.addEventListener("click", function() {
flagObject.toogler(2);
});
})();
h1 {
text-align: center;
}
h3 {
color: green;
}
.content {
border: 1px solid black;
background-color: #eee;
padding: 2em;
margin: 0 auto;
height: 1000px;
width: 800px;
border-radius: 30px;
text-align: center;
}
.flags {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 1000px;
}
.flag-sweden {
position: relative;
background-color: #006aa7;
height: 200px;
width: 320px;
margin-bottom: 2em;
}
.cross-one-sweden {
background-color: #fecc00;
position: absolute;
width: 40px;
height: 200px;
top: 0;
left: 100px;
}
.cross-two-sweden {
background-color: #fecc00;
position: absolute;
width: 320px;
height: 40px;
top: 80px;
left: 0;
}
.flag-japan {
position: relative;
height: 200px;
width: 320px;
background-color: white;
margin-bottom: 2em;
}
.circle-japan {
background-color: #bd0029;
height: 125px;
width: 125px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -62.5px 0 0 -62.5px;
}
<h1>Sandbox</h1>
<div id="content" class="content">
<div class="flags"></div>
</div>
As Pavlin Petkov said in the comments, the image is not clickable when you hide it, so you can't toggle it back on. A simple solution to this that achieves the same result is to change the opacity instead of the visibility:
remove: function(arg) {
if (arg == "1") {
flag1Element.style.opacity = 0;
}
if (arg == "2") {
flag2Element.style.opacity = 0;
}
},
show: function(arg) {
if (arg == "1") {
flag1Element.style.opacity = 1;
}
if (arg == "2") {
flag2Element.style.opacity = 1;
}
}
This will display/hide a div with a click effect, and it will continue to occupy space on the page, as in your codepen. If you need to use visibility for some reason, I'd recommend a container div beneath the now hidden div which can trigger the show function; however, for the question at hand, this is sufficient.
I have got code like below:
Now I would like to add functionality that increase the counter not only when I leave the box/square, BUT ALSO click the left mouse button outside the box/square. So the counter will be increasing only when the mouse leave the box/square and also click outside of the box/square.
var counter = 0;
function myLeaveFunction() {
document.getElementById("demo").innerHTML = counter += 1;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>
Add a boolean to check if mouse had left the div and bind a click handler to the document:
var counter = 0;
var mouseLeft = false;
function myLeaveFunction() {
document.getElementById("demo").innerHTML = counter+=1;
mouseLeft = true;
}
function clickBody() {
if (mouseLeft == true)
document.getElementById("demo").innerHTML = counter+=1;
mouseLeft = false;
}
document.onclick = clickBody;
This example will add an event listener to the body when the mouse leaves the box and will increase the counter when a click event occurs. The new event listener is then removed:
var counter = 0;
function myLeaveFunction() {
document.body.addEventListener("click", myClickHandler);
function myClickHandler() {
document.getElementById("demo").innerHTML = counter += 1;
document.body.removeEventListener("click", myClickHandler);
}
}
body {
margin: 0;
height: 100vh;
width: 100%;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
<body>
<div onmouseleave="myLeaveFunction()" onclick="event.stopPropagation()">
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>
</body>
JSFiddle if this doesn't work
Like this?
Once you left the box AND you click outside of it. The counter will be increased.
var showPopup = function (id) {
document.getElementById(id).style.display = "block";
}
var hidePopup = function (id) {
document.getElementById(id).style.display = "none";
}
// Button Click
document.getElementById('myButton').onclick = (ev) => {
showPopup('myPopup');
ev.stopPropagation(); // prevent immediate close (because button is "outside" too)
}
// Click outside to close popup
document.getElementsByTagName('body')[0].onclick = (ev) => {
let popup = document.getElementById('myPopup');
if( ev.path.indexOf(popup) == -1 ) { hidePopup('myPopup') }
};
hidePopup('myPopup');
body {
width: 100vw;
height: 100vh;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 30px;
text-align: center;
background-color: lightgray;
position: absolute;
margin: 10px;
display: none;
}
<div id='myPopup'>
<p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>
<button id='myButton'>Show!</button>
Take a look
This may be helful too Bootstrap Modal
I've been trying to make my menu close when I click anywhere on the page except for within the menu.
I managed to achieve this for when a link is clicked within the menu by giving it the same onclick function as the menu button, but I am not succeeding at clicking off the menu to close it.
http://codepen.io/anon/pen/LEvdmW
JS
function setVisibility(id) {
var targetButton;
switch( id ) {
case "layer":
targetButton = "button";
break;
}
if (document.getElementById(targetButton).value == 'Close') {
document.getElementById(targetButton).innerHTML = 'Open';
document.getElementById(targetButton).value = 'Open';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(targetButton).innerHTML = 'Close';
document.getElementById(targetButton).value = 'Close';
document.getElementById(id).style.display = 'inline';
}
}
HTML
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="layer"><a onclick="setVisibility('layer')"> Hello</div>
CSS
#layer {
position: absolute;
left: 8px;
top: 50px;
background-color: #989898;
width: 280px;
height: 100px;
padding: 10px;
color: black;
display: none;
}
button { border:none; background:#989898; color:#fff; padding:10px; outline:none; cursor:pointer;
}
It can be achieved via below code.
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Working Fiddle: http://jsfiddle.net/LCB5W/153/
Updated Fiddle: http://jsfiddle.net/LCB5W/154/
You can have a backdrop behind the div where you have your onclick event to hide the div. Check the modified code below (modified your code for you to understand):
Working example : DEMO HERE
HTML
<button name="type" id="button" onclick="setVisibility('layer')">Open</button>
<div id="backdrop" onclick="setVisibility('layer')"></div>
<div id="layer">Hello</div>
CSS
#layer {
position: absolute;
left: 8px;
top: 50px;
background-color: white;
width: 280px;
height: 100px;
padding: 10px;
color: black;
display: none;
z-index : 999;
}
#backdrop {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : black;
opacity : 0.5;
z-index : 2;
display : none;
}
button {
border:none;
background:#989898;
color:#fff;
padding:10px;
outline:none;
cursor:pointer;
}
JS
function setVisibility(id) {
var targetButton;
switch( id ) {
case "layer":
targetButton = "button";
break;
}
if (document.getElementById(targetButton).value == 'Close') {
document.getElementById(targetButton).innerHTML = 'Open';
document.getElementById(targetButton).value = 'Open';
document.getElementById(id).style.display = 'none';
document.getElementById("backdrop").style.display = "none";
} else {
document.getElementById("backdrop").style.display = "block";
document.getElementById(targetButton).innerHTML = 'Close';
document.getElementById(targetButton).value = 'Close';
document.getElementById(id).style.display = 'inline';
}
}