I want to close a Div when i click on the Background div(SearchBlur).
My problem is if i click on the shown div it closes also.
here is my javascrip code
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
here my html
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
the Programm looks like this
i want to close the popup wehn i click on the dark background
sorry for my bad english :D
Use event.stopPropagation(); onclick the child you want
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>
Try add a listener to the child div with following code
event.stopPropagation();
Which div are you trying to close?
From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}
In a simple way your html looks like:
<div class="blur">
<div class="popup"></div>
</div>
Your JS is just like this:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg
Related
I have two div elements side by side with scroll.
If i scroll left div automatically right div also should scroll.(Like beyond compare scroll)
<div id="leftdiv" style="overflow-y: scroll;"> Left Content</div>
<div id="rightdiv" style="overflow-y: scroll;">Right Content</div>
$("#leftdiv").on('scroll', function(evt) {
$("#rightdiv").scrollTop($(this).scrollTop());
})
https://jsfiddle.net/qyvezhvq/10/
see, I hope this is helpful
<script type="text/javascript">
$(function(){
$( "#leftdiv" ).scroll(function() {
if($( "#leftdiv" ).scrollTop() > 0)
{
$("#rightdiv").scrollTop($( "#leftdiv" ).scrollTop());
}
});
$( "#rightdiv" ).scroll(function() {
if($( "#rightdiv" ).scrollTop() > 0)
{
$("#leftdiv").scrollTop($( "#rightdiv" ).scrollTop());
}
});
});
</script>
Thanks.
I have two div's that I open that kinda belong together, but for programming reasons can't be connected. I simplified the code here because it's a lot of code. This is the basic.
<div id="container">
<div id="div1">
<div> when I am clicked I will open div2 </div>
</div>
<div id="div2">
<div> I can be clicked and all the div's stay open </div>
</div>
</div>
And this is the connected JavaScript
$(document).mouseup(function (e) {
var container = $("#div1");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
$(document).mouseup(function (e) {
var container = $("#div2");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
Now what I would like to do is when I click outside div1 it should close div1.
When I click on div1 it opens div2.
Currently with the above when I click in div2 it closes div1, because it is not a child of div1. So it should keep div2 opened.
And when I click outside div1 or div2 it should close the two div's.
How can I combine the two JavaScript codes to get the explained behaviour?
Summary of what I try to accomplish:
Click on the div inside div1 will open div2
Click outside div1 or div2 will close both div1 and div2.
In case the div inside div1 is not clicked and one clicks outside
div1, it should close div1.
Using closest() and a common class makes this simpler
$(document).mouseup(function(e) {
!$(e.target).closest('.content').length && $('.content').hide();
});
$('#div1').click(function() {
$('#div2').show();
})
#div2{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="content">
<div> when i am clicked i will open div2 </div>
</div>
<div id="div2" class="content">
<div> i can be clicked and all the div's stay open </div>
</div>
</div>
Pretty theorical....
But requirements are quite clear. I would do it using .stopPropagation().
e.target is the element clicked. If it is a child of an element having a "concurring handler" on the same event, the handler from the parent will execute. Except if you stop the propagation, which you should look at here.
Having a handler on a top-most parent that say "hide all", will will overcome the handler of the child saying somthing else. So in this case... From the child, you do not want the click (or mouseup... or whatever the event) to propagate to the top parent.
In short: .stopPropagation() will keep the event on the releveant element and you can "not care about" any concurring handler from the parents.
$("#div1").on("click", function(e){
e.stopPropagation();
whoAmI(e);
$("#div2").show();
});
$("#div2").on("click", function(e){
e.stopPropagation();
whoAmI(e);
console.log("I was clicked and #div1 stayed opened.");
});
$("#container").on("click",function(e){
$("#div1,#div2").hide();
whoAmI(e);
});
function whoAmI(e){
console.clear();
console.log( "I'm "+e.target.tagName+" "+((e.target.id=='')? "child" : e.target.id) );
}
#container{
height:1000px;
}
#div1, #div2{
border:1px solid red;
padding:2em;
margin:3em;
}
#div2{
display:none;
}
#container>div>div{
border:1px solid blue;
padding:0.5em;
margin:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">
<div> When I am clicked I will open div2 </div>
<div> I also do the same. </div>
</div>
<div id="div2">
<div> I can be clicked and all the div's stay open </div>
<div> I also do the same. </div>
<div> And me too! </div>
</div>
</div>
I suggest this the code written with jQuery:
$(document).on('click', function (e) {
if ( e.currentTarget.id == 'div1' ) {
$("#div2").show();
} else if ( e.currentTarget.id == 'div2' ) {
$("#div1").hide();
} else {
$("#div1").hide();
$("#div2").hide();
}
return false;
});
or in plain Javascript:
function handleClicks(e) {
var first = document.getElementById('div1'),
second = document.getElementById('div2');
if ( e.currentTarget.id == 'div1' ) {
second.style.display = 'block';
} else if ( e.currentTarget.id == 'div2' ) {
first.style.display = 'none';
} else {
first.style.display = 'none';
second.style.display = 'none';
}
}
document.body.addEventListener('click', handleClicks, false);
Also check the if-else statements there.
I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?
I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}
I have problem with div clicking.
Example :
<div class="search">
<div class="row">
</div>
<div class="row1">
DROPDOWN
</div>
</div>
Attempted jQuery:
$('body').click(function(e){
if(! $(e.target).hasClass('.row')){
console.log('clicked on something that has not the class theDIV');
}
});
I want when I click somewhere on search or whole body, to row hide his dropdown(row1).
Images :
Try this:
$('body').click(function(e){
var target = $(e.target);
if (target.is(".search") && $('.row1').is(':visible')) {
$('.row1').hide();
}
else if(target.is(".search") && !$('.row1').is(':visible')) {
$('.row1').show();
}
});
$(document).ready(function(){
$(".search").click(function(){
$(".row1").fadeOut()
}) })
I need your help, I am working on a website where I want a div to delay for 2 seconds then fade in when another div is clicked, but when I want to click it again (to close it) I want it to fade out instantly. Any help?
If you can use Jquery, the following code will help you do it as i got what you want:
this is default css:
.invisElem{display:none}
and the jquery code:
$('body').on('click', '.boxbutton1', function(){
var counter = $(this).data('count');
if(counter == undefined){
counter = 0;
setTimeout(function() {
$('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
}, 2000);
}
else if(counter == 0){
$('.gymtext').fadeOut(function(){
$('.gymtext').remove()
});//fadeout quickly then remove
}
})
i tried to write it down novice friendly if you needed help add comment
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").fadeToggle(240);
});
});
</script>
<button>Click to fade DIV</button>
<div id="div" style="width:100px;height:100px;background-color:blue;"></div>
Html:
<div>Show div1 and hide div2</div>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
Css:
#div2 {display:none;}
Jquery:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow');
});
});