A div is initially hidden, I want to display it when clicking a button. And once it is visible, I want to hide it when clicking anywhere outside that div.
I'm trying following code, it displays the div, but the problem is in the second part (clicking outside) the box. The second part conflicts with first one so it hides it before displaying.
How can I fix that?
$('button').on('click', function(e){
e.preventDefault();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').hide();
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
You can stop the propagation of your event so that when button is clicked the event doesn't bubble up to the document. Also instead of hide(), just using removeClass(...) should work for you.
Also that event propagation doesn't stop in this button listener itself but from the next event listener which in your case is on the document and that is what we require.
$('button').on('click', function(e){
e.stopPropagation();
$('.box').addClass('active');
});
//hide is by clicking outside .box
$(document).on('click', function (e) {
if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
$('.box').removeClass('active');
}
});
button {
margin-bottom: 20px;
}
.box {
width: 200px;
height: 120px;
background: #fab1a0;
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>
Related
I have images (.rv_button) that are acting as buttons to toggle the div's below (#reveal). I want to hover over the button to open the div but right now I can't get the div to stay open. Can someone help me with this?
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal').hide();
jQuery('.rv_button').on('mouseenter mouseleave', function(e) {
e.preventDefault();
jQuery("#reveal").fadeToggle()(slow, swing, callback);
jQuery('.rv_button').toggleClass('open');
});
});
Rather than using toggleClass(), on mousenter, remove the open class from all of the buttons and add it to e.target or $(this). And on mouseout just remove it from all the buttons.
Also, remove (slow, swing, callback) or use them as arguments in fadeToggle().
e.g.
jQuery("#reveal").fadeToggle('slow');
And to keep the div to stay open, just wrap the buttons and div in a container and listen for the mouseout event on it instead of the buttons themselves.
$(document).ready(function() {
// Hide the div
$('#reveal').hide();
$('.rv_button').on('mouseenter', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$(e.target).addClass('open');
$("#reveal").fadeIn();
});
$('.container').on('mouseleave', function(e) {
e.preventDefault();
$('.rv_button').removeClass('open');
$("#reveal").fadeOut();
});
});
.container {
width: 400px;
}
#reveal {
width: 400px;
height: 400px;
background-color: beige;
text-align: center;
font-size: 2em;
}
.rv_button {
padding: 1em;
background-color: brown;
width: 400px;
box-sizing: border-box;
}
.open {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="rv_button">Button 1</div>
<div class="rv_button">Button 2</div>
<div class="rv_button">Button 3</div>
<div id="reveal">Reveal</div>
</div>
In my project, I have a big div, and there is another div in that div as a shape.
When you click the shape, you did right and you have 1 point. When you click only the background div, I want to play a sound.
When I do (simple example):
var $audioLifeLost = new Audio('Mis.mp3');
#divid.onclick = function (){
$audioLifeLost.play();
}
it also plays the sound when I hit the shape because I hit both div's at the same time.
Anyway how can I do it?
You need to stop the event from propagating up to the parent:
document
.querySelector('#inner')
.addEventListener('click', e => {
console.log('click inner');
e.stopPropagation(); // <-- stop event propagation
})
document
.querySelector('#outer')
.addEventListener('click', () => {
console.log('click outer');
})
#outer {
background: pink;
height: 300px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
}
#inner {
background: salmon;
width: 150px;
height: 150px;
}
<div id="outer">
<div id="inner"></div>
</div>
document.getElementById("divid").onclick = function (e) {
if (e.target == document.getElementById("divid"))
$audioLifeLost.play();
}
The requirement is user can Click on black box to show orange box, and click on orange box to show red box, but the orange box and red box should be hidden
when user click anywhere of the document except the orange box or the
red box itself.
But currently the issue is that we cannot click on orange box to show red box
Would much appreciate if you could help me out, thanks a lot
Demo link: http://plnkr.co/edit/OqlfbmFPKdXx0wDhnLxZ?p=preview
$(function() {
$('#mypop').click(function(e) {
event.stopPropagation();
});
$(document).on('click', '#myclick', function() {
$('#mypop').toggle();
$(document).one('click', function() {
$('#mypop').hide();
});
});
$(document).on('click', '#myclick1', function() {
$('#mypop2').show();
});
$(document).on('click', '#myclick2', function() {
$('#mypop2').show();
});
})()
#mypop {
background-color: orange;
position: absolute;
top: 130px;
left: 50px;
width: 150px;
padding: 15px;
}
.mydiv {
background-color: black;
padding: 30px;
width: 50px;
cursor: pointer;
color: white;
}
#mypop2 {
margin-top: 150px;
background-color: red;
width: 100px;
height: 50px;
padding: 18px;
display: none;
}
#myclick1,
#myclick2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myclick" class='mydiv black-box'>
click me!
</div>
<div id="mypop" style="display:none;" class='orange-box'>
<p>hello world</p>
<div id='myclick1'>BUTTON1</div>
<div id='myclick2'>BUTTON2</div>
</div>
<div id="mypop2" class='red-box'>
Hello World!!!
</div>
try this. I think this is what you are excepting but I'm not sure since you keep editing your question.
Demo Link: http://plnkr.co/edit/n7rdgqTwiFrXtpgoX4TQ?p=preview
$('#myclick1').click(function(){
$('#mypop2').show();
});
$('#myclick2').click(function(){
$('#mypop2').show();
});
You have couple of things mixed up.
The main stop-point was the very first event listener
$('#mypop').click(function(e) {
which is incompatible with the rest of listeners
$(document).on('click','#myclick1',function(e){
after I have changed it to
$(document).on('click','#mypop', function(e){
the other listeners have started working.
Second thing is that for embedded elements (parent-child) you need to stop event propagation, otherwise the parent event is triggered as well (which is not desired)
$(document).on('click','#myclick1',function(e){
e.stopPropagation();
:
});
I have also changed the CSS a bit and added class hide to use instead of styles. Toggling this class is what hides and shows an element.
I have 6 divs (.selector) set to do (onclick):
Show all tables
Show Nº1, Hide rest
Show Nº2, Hide rest
...
Show Nº5, Hide rest
They also toggle a class "activated" that changes the background color.
What I'm trying to do is that once I click on "Show Nº1, Hide rest" disable the click option (On this div) until I click in another one first like "Show all tables" or "Show Nº2, Hide rest".
Something like the "once function" but that resets as soon as another div is activated. Any way to do this?
Here is my CSS
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
Here is my JavaScript
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});
If you change toggleClass to addClass in your click function. Then, more than 1 click in your .activated will have no effect (as the click is disabled):
$('.selector').on('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).addClass('activated');
});
Or you can check if the clicked .selector has .activated class like:
$('.selector').on('click', function(event) {
if($(this).is('.activated')) return;
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
});
There's two things to do:
Wrap the JavaScript inside a function
Unbind the click event everytime you click on something
Here's how:
function clickEvent(elements){
elements.bind('click', function(event) {
$('.selector').not(this).removeClass('activated');
$(this).toggleClass('activated');
$('.selector').unbind('click');
clickEvent($('.selector').not(this));
});
}
clickEvent($('.selector'));
.selector {
height: 25px;
width: 25px;
background-color: #702C3D;
color: #FFF; //for display purposes
margin-left: 2px;
margin-right: 2px;
float: left;
cursor: pointer;
}
.selector.activated {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="selector">1</div><div class="selector">2</div><div class="selector">3</div><div class="selector">4</div><div class="selector">5</div><div class="selector">6</div>
You should be able to do
if($(this).hasClass('activated'))
return;
To skip it if this was allready activated.
I create a bunch of DIVs dynamically. I'm using jQuery resizeable handles on them.
My question is how do I make the handles appear on click/hover and make them disappear when clicked out of the relevant div?
jsFiddle
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function() {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
You can bind it with a click or a hover.
Click:
$('.resizable').resizable({
handles: 'se'
});
////////////////////////////////////////////////////////////////////////////////////
//how do I get the below working? These $('.resizable') DIV are created dynamically
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
.resizable{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.resizable.focus {
background: #f0f;
}
.resizable .ui-resizable-handle {
background-color: black;
display: none !important;
}
.resizable.focus .ui-resizable-handle {
display: block !important;
}
<div id="dragDiv1" class="resizable"></div>
<div id="dragDiv2" class="resizable"></div>
<div id="dragDiv3" class="resizable"></div>
Or, if you want the hover, just replace the .resizable.focus with .resizable:hover. http://jsfiddle.net/sjchn0L8/2/