We Keep Coding

how to close a jquery popup when i click evrywhere except the popup it self [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 2 years ago.
can anyone help me so slove my problem
it's i made this jquery popup
we have the popup "a" ,"b" ,"c" and "d"
when i open a i want when i click everywhere i close the a but in my case when i click in "b" or "c"or "d" it open them
i want when the popup it opened when i click evrywhere except the poupup it close it
please help me and thank you
here is my code
$('.open').click(function() {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length > 0) {
$('.popup:visible').fadeIn(400);
}
box.fadeIn(400);
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>

I reworked your $('.open').click() handler here.
Your have 3 cases:
1: There is a .popup visible and the click was made to open another. So you have to first fadeout the opened one and then (in the fadeout callback) open the new one.
2: There is a .popup visible and the click was made to open the same that is already opened. So just do nothing.
3: No .popup is visible. So just open the .popup.
$('.open').click(function(e) {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length && visibleBoxes[0].id !== box[0].id) {
visibleBoxes.fadeOut(400,function(){
console.log("case 1")
box.fadeIn(400);
})
}else if (visibleBoxes.length && visibleBoxes[0].id === box[0].id) {
console.log("case 2")
// do nothing!
}else{
console.log("case 3")
box.fadeIn(400);
}
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>

mouse up callback not working after dragsort

I am trying to update the inputbox's value after picture dragged.
Below is the fiddle and code.
I need to manual click picture after dragsort to update $('#pic').val() How can I skip the manual click? or is it a way to auto click "li" ?
I have tried ul.children('li').first().click() but it's not working either.
fiddle
html
<div class="mediaset" data-param="{filter: 'image', batch: 1}">
<input type="hidden" name="media" data-param="{type: 'media'}">
<div class="topside">
<button type="button" class="btn icon-image green label" onclick="getElementById('inputfile_pic').click();">UPLOAD</button>
<input type="file" class="imagesUpload" data-value="pic" multiple="" id="inputfile_pic" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;">
<input type="hidden" name="pic" id="pic" value="book.png,a1.png,1804161714530.jpg,">
</div>
<ul class="items sortablelist" id="v_pic" data-listidx="0">
<li id="book" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="0">
<h5>book.png</h5>
<img src="../timthumb.php?src=e30001/data2/pic/book.png&h=120&w=120" title="book.png" alt="book.png" id="book_img" onclick="openBigPic('/e30001/data2/pic/book.png')">
<div style="text-align:center;">
<i class="fa fa-times"></i>
<i class="fa fa-search-plus"></i>
</div>
</li>
<li id="a1" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="1">
<h5>a1.png</h5>
<img src="../timthumb.php?src=e30001/data2/pic/a1.png&h=120&w=120" title="a1.png" alt="a1.png" id="a1_img" onclick="openBigPic('/e30001/data2/pic/a1.png')" style="cursor: move;">
<div style="text-align:center;">
<i class="fa fa-times"></i>
<i class="fa fa-search-plus"></i>
</div>
</li>
<li id="1804161714530" style="border: 1px solid rgb(219, 224, 226); width: 150px; text-align: center; list-style-type: none; cursor: pointer;" data-itemidx="2">
<h5>1804161714530.jpg</h5>
<img src="../timthumb.php?src=e30001/data2/pic/1804161714530.jpg&h=120&w=120" title="1804161714530.jpg" alt="1804161714530.jpg" id="1804161714530_img" onclick="openBigPic('/e30001/data2/pic/1804161714530.jpg')">
<div style="text-align:center;">
<i class="fa fa-times"></i>
<i class="fa fa-search-plus"></i>
</div>
</li>
</ul>
</div>
js
$(document).ready(function(){
$('.sortablelist').dragsort({
dragSelectorExclude: 'input, textarea, a[href] , i , em',
dragBetween: true,
placeHolderTemplate: '<li style="font-size:18px;"><div style="padding-top:50px;">moving...</div></li>'
});
$('.sortablelist li').mouseup(function(){
ul = $(this).parent();
switched_input_value = '';
ul.find('li').each(function(){
picValue = $(this).children('h5').html();
if(!!picValue) {
switched_input_value += picValue+',';
}
}).promise().done(function(){
//ul.children('li').first().click();//not working either
input_id = ul.attr('id').replace('v_','');
$('#'+input_id).val(switched_input_value);
console.log(switched_input_value);
});
});
});

May be something you are looking for. You no need to trigger click and no need to bind click event to $('.sortablelist li'), just use dragEnd event
$('.sortablelist').dragsort({
dragSelectorExclude: 'input, textarea, a[href] , i , em',
dragBetween: true,
placeHolderTemplate: '<li style="font-size:18px;"><div style="padding-top:50px;">moving...</div></li>',
dragEnd: function() {
getData();
}
});
function getData() {
var listName = [];
$('.sortablelist').find('li').each(function() {
console.log($(this).find('h5').html());
listName.push($(this).find('h5').html());
});
$('#pic').val(listName.join(','));
}
See the fiddle https://jsfiddle.net/3a5q4mhy/50/

Background image div clickable

I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>

You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>

From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>

Unable to make button show or hide depending on whether another element has content

So this is probably a simple question. But I have to ask because it's not doing what I want.
Here is the button JavaScript:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
});
The button is shown if there is content in the div. But I would like it to hide again if the div has no content.
I tried:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
if ($(".saved-items").html().length < 0) {
$('.btn-01').hide();
}
});
Here is the HTML when an item is added:
<div class="col-sm-2">
<div class="saved-items"><h4>Items:</h4>
<ul>
<li><i class="fa fa-anchor" aria-hidden="true" style="color:#f60;margin-right:10px;"></i>RAW</li>
</ul>
<script>
$(document).ready(function(){
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
});
</script>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div style="display: block;" class="btn-01">Check Out</div></a>
</div>
</div>
And this is the HTML without any items saved:
<div class="col-sm-2">
<div class="saved-items">
<h4>Items:</h4>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div class="btn-01">Check Out</div></a>
</div>
But no go. Here is the CSS of btn-01:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px !important;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
display: none;
border:none;
}

You can use toggle() to achieve this:
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
Working example

length of string is zero or greater than zero..can't be less than zero.
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}else{
$('.btn-01').hide();
}
});
please check https://jsfiddle.net/Shilpi/uhfruo1a/2/

How to hide div when it's already open?

I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?

You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>

Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})