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>

JavaScript Show invisible divs on click

I ran into a problem that when I click on the button, it just flips the icon but only makes the invisible fields visible on the second click. Are there any idea how to do it?
(Heres a gif to show my problem: https://ibb.co/cvz7pWC )
Also heres my code :
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display === "none" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▲</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>

This could be to do with you not being to read element.style.display as none the first time round. This is because it has not yet been set by JavaScript, but just by css. I suggest changing your if statement to check for not "block".
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display != "block" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>

ElementCSSInlineStyle.style only returns (or sets) inline styles on an element. On your first click there is no inline display property to read so your condition sets it to none. On the second click your condition finds none and sets it to block.
The answer to look for !block solves this immediate problem but it stills ties your styling to your js rather than keeping it in your CSS. This means that if the default display property of your div needs to change in your layout (inline-block, flex, etc) you would need to change it in your js as well as your CSS.
For this reason I would recommend not using inline styles at all but rather rather use Element.classList to manage applied styles from your CSS – in this case just the adding/removing of a .hidden class that sets display to none without having to know what the appropriate visible display default is.
Also, since you are querying the button element in your code anyway, it would be better to apply the click listener from your js as well rather than inline.
function moreSoc() {
const moresoc = document.getElementById("moresoc");
if (moresoc.classList.contains('hidden')) {
moresoc.classList.remove('hidden');
mbtn.innerHTML = "More ▲";
} else {
moresoc.classList.add('hidden');
mbtn.innerHTML = "More ▼"
}
}
const mbtn = document.getElementById("mbtn");
mbtn.addEventListener('click', moreSoc);
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
}
.hidden {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn">More ▲</button>
</div>
<section class="social-links hidden" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>

Check data attribute values in multiple divs with click function

I'm trying to get a selected group of divs to change the background color based off of data set in the buttons data attribute.
I've done some digging, but I'm getting confused on how to pass the conditional against the title in the div and the data in the data attribute from the button.
I know I have to possibly .split() the data out of the button since there is more than one data attribute for each button. But then getting that info and getting to check again the set of divs is where I think I'm getting hung up on.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/bmvOYB
HTML:
<section class="state-group">
<div class="state" title="Illinois">
<h2>Illinois</h2>
</div>
<div class="state" title="New Hampshire">
<h2>New Hampshire</h2>
</div>
<div class="state" title="Washington">
<h2>Washington</h2>
</div>
<div class="state" title="North Dakota">
<h2>North Dakota</h2>
</div>
<div class="state" title="South Dakota">
<h2>South Dakota</h2>
</div>
<div class="state" title="Wisconsin">
<h2>Wisconsin</h2>
</div>
</section>
<section class="btn-group">
<a data-state='New Hampshire,Illinois,Wisconsin' class="region region-one" href="">Region 1</a>
<a data-state='Illinois,Washington,North Dakota' class="region region-two" href="">Region 2</a>
<a data-state='Washington,North Dakota,South Dakota' class="region region-three" href="">Region 3</a>
</section>
JS:
var $region = $('.region').data("state");
var $single = $region.split(',');
$(".region").on("click", function(e) {
$(".state-group div").each(function() {
var $state = $(this).attr("title");
if ($state == $single ) {
$(this).css('background-color','blue')
}
});
e.preventDefault();
});
Basically, once you click the button it will check the data from the button you clicked on, find the title of the div (in this case the state) and if it matches, make the background of those specific divs blue.
Again, not sure if I'm going about this the correct way, or if I need to get the data from the divs and store that in a variable as well. Hope that make sense.

You should get state from the clicked button, not when js load. So that you will have states based on the clicked button.
$(".region").on("click", function(e) {
//Below line is important; Otherwise it won't work for other buttons.
var $single = $(this).data("state").split(",");
$(".state-group div").each(function() {
var $state = $(this).attr("title");
if ($single.indexOf($state) > -1) {
$(this).css('background-color','blue');
}else{
$(this).css('background-color','#ccc');
}
});
e.preventDefault();
});
https://codepen.io/anon/pen/PyRgEZ

Here's what you need to do:
var $region = $('.region').data("state");
var $single = $region.split(',');
$(".region").on("click", function(e) {
$(".state-group div").each(function() {
var $state = $(this).attr("title");
// HERE
if ($single.includes($state)) {
$(this).css('background-color','blue')
}
});
e.preventDefault();
});

You may not need to keep reference of each state in the data, rather than use data-state & use the same value as class of the relevant element.So on click get the data-state & from the dom get the element which have same class and highlight them.
The benefit of this length of the value of data-state will not increase with increase of new element
$(".region").on("click", function(e) {
e.preventDefault();
let getDataState = $(this).data('state')
$('.' + getDataState).css('background-color', 'blue')
});
body {
padding: 20px;
}
.state-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.state {
flex: 0 1 13%;
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
background: #ccc;
font-size: 16px;
text-align: center;
padding: 10px;
}
.btn-group {
display: flex;
flex-direction: column;
a {
margin: 10px 0;
text-decoration: none;
display: block;
padding: 15px 5px;
background: lighten(blue, 20%);
color: white;
text-align: center;
width: 100%;
max-width: 150px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="state-group">
<div class="state btn-1 btn-2" title="Illinois">
<h2>Illinois</h2>
</div>
<div class="state btn-1" title="New Hampshire">
<h2>New Hampshire</h2>
</div>
<div class="state btn-2 btn-3" title="Washington">
<h2>Washington</h2>
</div>
<div class="state btn-2 btn-3" title="North Dakota">
<h2>North Dakota</h2>
</div>
<div class="state btn-3" title="South Dakota">
<h2>South Dakota</h2>
</div>
<div class="state btn-1" title="Wisconsin">
<h2>Wisconsin</h2>
</div>
</section>
<section class="btn-group">
<a data-state='btn-1' class="region region-one" href="">Region 1</a>
<a data-state='btn-2' class="region region-two" href="">Region 2</a>
<a data-state='btn-3' class="region region-three" href="">Region 3</a>
</section>

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/

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/