I want to click anywhere outside of my div to hide it.
I have an svg background which on top of that has a graph with nodes.
I click on a node(circle) on my SVG and if this particular 'extra' node is clicked then I have a box appear, I show the box with:
d3.select('#rightBox')
.attr('hidden', null);
d3.select('#leftBox')
.attr('hidden', null);
d3.select('#headerDiv')
.attr('hidden', null)
d3.select('#headerText')
.attr('hidden', null)
This is because the div is hidden on load. Im not using the css display property because it wasn't working!
The problem is when i try angular (click) = "functionThatHidesTheDiv" on the body and hide the elements, of course because the circle nodes are part of the body then the box never gets opened?
I use angular too. once the element is not hidden, how can i click anywhere on the svg excluding the div itself to hide it?
you need to check if the 'target' of your click event is the div, or is inside of it.
Maybe something like that ?
const svg = document.querySelector('.svg');
const circle = document.querySelector('.circle');
svg.addEventListener('click', (e) => {
if (!(e.target === circle) && !circle.contains(e.target)) {
console.log('Click outside');
} else {
console.log('Click inside');
}
});
.svg {
display: flex;
justify-content:center;
align-items: center;
width: 400px;
height: 400px;
background-color: tomato;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: tan;
}
<section>
<div class="svg">
<div class="circle"></div>
</div>
</section>
Related
I have a few divs that have a classname "soundWhenHover".
I want to play an audio (a click sound) whenever I hover over it. I can achieve this by iterating over the elements with the class name and adding an event listener for mouseover. However, if you move the mouse around the div, it makes the sound more than once. I only want the audio to play once every time you hover over the div.
I added a boolean that changes to true once it hovers over, then on mouseout it changes it to false. The problem with this is that the div has children elements, and when you hover over those elements it counts as a mouseout. How do I make a sound once for the div and the elements?
just bind your sound to the mouseenter event of the parent element:
const mouseTarget = document.getElementById('mouseTarget');
mouseTarget.addEventListener('mouseenter', e => {
console.log('play sound');
});
#mouseTarget, #child {
border: 1px solid #333;
}
#mouseTarget {
padding: 5px;
width: 300px;
height: 50px;
}
#child {
padding: 5px;
width: 200px;
height: 20px;
}
<div id="mouseTarget">
<div id="child">
Test
</div>
</div>
I have the following javascript that adjusts my div height when a user clicks trend_exp_bt.
It works fine at the moment. However, if the user clicks trend_exp_bt again, i want to reset the div height (130px).
Please can someone show me how to do this, i've tried to look at toggle function on google but these don't seem to be working for me.
<script>
$('.trend_exp_bt').click(function(){
$('.trending_contain').animate({height:'500'})
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
})
</script>
Maybe toggling a class would work for you?
document.getElementById('trend_exp_bt').onclick = function() {
document.getElementById('exp-panel').classList.toggle('expanded')
}
.panel {
width: 250px;
height: 130px;
border: 1px solid blue;
background-color: lightgrey;
transition: all 0.3s;
}
.expanded {
height: 300px;
}
<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>
If you want to use click handlers, you will have to remove the "expand" handler and add a "collapse" handler after it is expanded. You will have to do the opposite when a user collapses the div element.
function expandDiv() {
$('.trending_contain').animate({height:'500'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
$('.trend_exp_bt').off('click').on('click', collapseDiv)
}
function collapseDiv() {
$('.trending_contain').animate({height:'200'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∨");
$('.trend_exp_bt').off('click').on('click', expandDiv)
}
$('.trend_exp_bt').click(expandDiv);
This answer on a different thread: https://stackoverflow.com/a/24808936/6401041 says that this method for creating a CSS triangle is good because you can 'trigger the hover state or click event only when the cursor is inside the triangle' and then a demo is shown for how this can be done with the hover state.
My problem is basically this one:
https://i.stack.imgur.com/zYIS7.png
I don't want the user to be able to click in that area and trigger my onclick function which makes my triangle disappear. I have seen how to do this with :hover and :active but not with a click event. How can I make it so that only when the user clicks inside the triangle, does the function get called, making the triangle disappear for good with
style.visibility = "hidden";
Any help is greatly appreciated
You can make the triangle with a divelement, instead of a pseudoelement.
fiddle
document.querySelector('.triangle').onclick = function() {
this.style.display = "none";
}
.triangle-container {
overflow: hidden;
height: 100px;
}
.triangle {
width: 100%;
height: 100%;
background-color: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
<div class="triangle-container">
<div class="triangle"></div>
</div>
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
I'm trying to build a (semi-transparent) overlay that covers all on a web page.
Similar to this: http://www.jankoatwarpspeed.com/use-jquery-to-turn-off-the-lights-while-watching-videos
<div id="overlaySplash" onclick="clickHandler(this)">
<div id="insideBox">
[ label elements here with onclick="dosomething()" ]
</div>
</div>
css
#overlaySplash {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
background: rgb(50, 50, 50);
background: rgba(0, 0, 0, .50);
z-index: 50;
}
#insidebox {
position: absolute;
z-index: 100;
left: 15%;
right: 15%;
bottom: 5%;
line-height: 50px;
text-align: left;
}
The problem is that I'm not using jquery and the overlay div will have some clicable contents on int. I have this function below but when I click on elements inside the main overlay div JS will return e.id as being the overlay div itself, not the clicked element. This way I can't tell where the user really clicked.
function clickHandler(e){ //hide the div overlaySplash
e = e || event;
alert(e.id);
}
THE BOTTOM LINE:
user clicked an label inside the div: dosomething();
user clicked the background (the DIV itself): closeOverlaySplash();
I don't think you need to completely stop propagation as it may serve some purpose later on. It might be easiest to create a separate js & css files that encompass this functionality for ease of use.
The issue you have is basically the event is bubbling up to the parent when it isn't currently needed. You can easily check the event.target.id to see if the parent was clicked or not. With this you can make sure the overlay was clicked vs the content.
eg:
if (event.target.id == "overlay") {
//hide the overlay
}
JSFiddler
Like this:
HTML
<div id="overlaySplash" onclick="clickHandler(event);">
<div id="insideBox" onclick="clickHandlerInner(event);">Inner</div>
</div>
JS
function clickHandler(event) {
alert("no");
}
function clickHandlerInner(event) {
if (!event) var event = window.event;
event.cancelBubble = true; //IE
if (event.stopPropagation) event.stopPropagation()
alert("yes")
}
jsFiddle