make an absolute div hidden when something outside of it is clicked - javascript

I have some code for the function that runs when a button is clicked in my site:
function shadow() {
document.getElementById("overlay").style.visibility="visible";
document.getElementById("dim").style.visibility="visible";
document.getElementById("dim").onclick="document.getElementById('dim','overlay').style.visibility='hidden'";
}
With overlay being the overlay div that I want to be re-hide-able, and dim being the lower z-index dimmer over the entire page when the function runs.
The third line is my attempt at making it so that when an area outside of the overlay is clicked, the dim and overlay go away - help on that would be great!

The onclick property expects a function reference, not a string. In addition, the getElementById method only accepts a single id parameter, which means that only the first element id that you passed to it would be selected.
Based on the code you provided, it looks like you want something like this (live example):
function shadow() {
var overlay = document.getElementById('overlay');
var dim = document.getElementById('dim');
overlay.style.visibility = 'visible';
dim.style.visibility = 'visible';
dim.onclick = function() {
overlay.style.visibility = 'hidden';
dim.style.visibility = 'hidden';
};
}
Alternatively, you could also add a click event listener to document and then determine whether event.target is the #overlay element.
For instance, the following would work (live example):
document.addEventListener('click', function (event) {
var overlay = document.getElementById('overlay');
var dim = document.getElementById('dim');
if (event.target !== overlay && !event.target.closest('#overlay')) {
overlay.style.visibility = 'hidden';
dim.style.visibility = 'hidden';
}
});

Related

DOM Manipulation Click Mouse Event

I was trying to change the color of the background of the web page with a mouse click, below are the lines for the same:
let bodyvar = document.querySelector('body');
bodyvar.addEventListener("click",generate);
function generate(){
bodyvar.style.backgroundColor = "red";
}
When I test individual lines in console it is selecting the body and the function and everything works correctly individually but not on the actual page.
I have just started leaning JS so am not sure what am missing here, will I also need to consider the co-ordinates that the mouse clicks on?
I suspect that the <body></body> is empty. Add some content, or define the width and height.
let bodyvar = document.querySelector('body');
bodyvar.style.minWidth = "100vw";
bodyvar.style.minHeight = "100vh";
bodyvar.addEventListener("click",generate);
function generate(){
bodyvar.style.backgroundColor = "red";
}
Alternatively, I can use <HTML> instead of <body>.
let bodyvar = document.querySelector('html');
bodyvar.addEventListener("click",generate);
function generate(){
bodyvar.style.backgroundColor = "red";
}

How can i target appended items one by one in javascript?

I created a simple new tab page similar to web browsers, but when I create a new tab and press the x icon to triger closetab() it closes all the tabs and does not delete them in order one by one. How do i make each of appended items unique?
JS:
function addTab() {
var img = document.createElement("img");
img.src = "resources/img/delete-icon.svg";
img.className = 'deleteicon';
img.id = "deletetab";
img.onclick = closeTab;
var ulLocation = document.getElementsByClassName('abc')[0];
var whereTab = document.getElementById('listid');
var addTab = document.createElement('li');
addTab.className = 'first-tab';
addTab.id = "listid";
addTab.className = 'active';
addTab.innerHTML = "mozilla-firefox/newtab";
addTab.appendChild(img2);
ulLocation.appendChild(addTab);
addTab.appendChild(img);
}
function closeTab() {
var whereTab = document.getElementById('listid');
if (whereTab.style.display == 'block') {
whereTab.style.display = 'none';
} else {
whereTab.style.display = "none";
}
}
You have at least 2 options. One is to target the active tab and close it when the X is clicked. This is assuming you only have one active tab at a time (denoted by an active class for example).
function closeTab(event) {
document.querySelector('li.tab.active').remove();
}
Another option is to reference the tab relative to the close icon, which you can reference in the event argument of your click listener. Since you're adding these dynamically, you can just remove them with the delete click rather than hide. Something like:
function closeTab(event) {
event.target.closest('li.tab').remove();
}
In these examples, you have set a className for your tab containers to be tab

Mapbox GL JS toggle layers forces a double click on initial event

I am trying to recreate the Mapbox GL JS toggle example here:
https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/
In the example, when you click on the button it immediately changes its state to non-visible and turns the layer off. In my code you have to initially click on the button twice to get it to change to non-visible and turn the layer off and after that the button behaves normally. Any suggestions on how to get it so you only have to click once initially? This is the section of the code I think is problematic:
for (const id of toggleableLayerIds) {
// Skip layers that already have a button set up.
if (document.getElementById(id)) {
continue;
}
// Create a link.
const link = document.createElement('a');
link.id = id;
link.href = '#';
link.textContent = id;
link.className = 'active';
// Show or hide layer when the toggle is clicked.
link.onclick = function (e) {
const clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
const visibility = map.getLayoutProperty(
clickedLayer,
'visibility'
);

Turning divs into functions click, mouseover, and mouseout

this might be a very stupid question. I want to access different divs and interact with one another without using buttons functions, so I am trying to turn a normal div into a function when it hovers and then when out it does another animation and when clicked it should do something else.
https://jsfiddle.net/Lshp4ofw/67/
var BaseGraph = document.getElementById("BaseGraphic");
var BaseGraph = BaseGraphAct;
var BaseGraphAct = function(){
if(BaseGraph){
BaseGraph.addEventListener("mouseover", function(event) {
event.InteraBase = document.getElementById("InteractionBase");
InteraBase.classList.remove("dead");
});}
}
Here is example how you can change state of div with class 'dead' from another div:
var BaseGraph = document.getElementById("BaseGraphic");
var IB = document.getElementById("InteractionBase");
BaseGraph.addEventListener("mouseover", function(event) {
IB.classList.remove('dead');
});
BaseGraph.addEventListener("mouseout", function(event) {
IB.classList.add('dead');
});

dynamically added button on click not working

I'm building a function in my own image browser that creates and displays a delete button when the user hovers the cursor over a certain image's div and hides the button when the user hover the mouse out of the div.
this is the code:
function displayImages() {
//run through array of images
for (a = 0; a < images.length; a++) {
var container = document.createElement('div');
container.id = 'container'+images[a];
container.style.width = 120;
container.style.backgroundColor = '#e9e9e9';
container.style.height = 140;
container.style.margin = 5;
container.style.display = 'inline-block';
container.style.float = 'left';
var imageID = images[a];
container.onmouseover = function() {imageRollover(this)};
container.onmouseout = function() {imageMouseOut(this)};
}
}
function imageRollover(image) {
var trashcan = document.createElement('BUTTON');
trashcan.id = 'trash'+image.id;
trashcan.className = 'deleteButton';
trashcan.onclick = function() {deleteImage(image.id);};
document.getElementById(image.id).appendChild(trashcan);
}
function imageMouseOut(image) {
document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
}
function deleteImage(image) {
alert(image);
}
My problem is, that when I click trashcan, it calls nothing. I already tried to add the onlick event normally:
trashcan.onclick = deleteImage(image.id);
But then, for some reason, is calls the function when I hover my mouse over the container.
How do I make sure that on click events for dynamically added rollover buttons work?
The function can de viewed on: http://www.imaginedigital.nl/CMS/Editor/ImagePicker.html or http://jsfiddle.net/f239ymos/
Any help would be highly appreciated.
You are forcing me to guess here(not giving a fiddle), and create a scenario of my own but from what I understand, you want a button to appear no hover, and when pressed to delete the image so here its a working fiddle
hover functionality
$((document.body).on('mouseenter', '.test', function(){
console.log('here');
$(this).children('.test .x_butt').show();
});
$(document.body).on('mouseleave', '.test', function(){
$('.test .x_butt').hide();
});
remove functionality
$(document.body).on('click', '.x_butt', function(){
$(this).parent().remove();
});
P.S. as for your dynamically added divs issue, the $(selector1).on('click','selector2', function() {...}); deals with it, as long as selector1 is not added dynamically. (selector2 would be the div you want the function to be on) demo with dynamically added elements ( click clone )
First change
window.onload = loadImages(); to window.onload = loadImages;
Then since you pass an object you can change
function imageMouseOut(image) {
document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
}
to
function imageMouseOut(image) {
image.removeChild(image.childNodes[0]);
}
However why not just hide and show the trashcan? Much cleaner

Categories

Resources