Develop Reference

Hide a list when clicking outside

I have a share link that shows a list of links when clicked. I'm using toggle to hide and show this list.
When the list is visible, the user can click share to hide (toggle) the visibility of the list of links.
However, the small problem with this is, the list of links remain visible until the user toggles the list by pressing share.
I added this script to make it possible to close the list if the user clicks outside the list.
$(".meta-share").click(function() {
event.preventDefault();
$(".social-share").fadeToggle();
});
$(document).mouseup(function(e) {
var container = $(".social-share");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
However, the toggle doesn't work as expected now.
Can anyone help?
Here's a jsFiddle showing the problem.

that's because you say to fade when you click on the target and next to the target. all you have to do is return false when the target is meta--share in your document.mouseup.
$(".meta--share").click(function() {
event.preventDefault();
$(this.nextElementSibling).fadeToggle();
});
$(document).mouseup(function(e) {
if(e.target.className == "meta--share"){
return false;
}
var container = $(".social-share");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
here's your adjusted fiddle: https://jsfiddle.net/9hpw15oq/2/
Update
in the .click function. instead of looking for the element through class. select the element using the .click event.
I have updated the code and fiddle

This code should work fine :
$(".meta--share").click(function() {
event.preventDefault();
if($('.social-share').is(':visible')){
$(".social-share").fadeOut();
}
else{
$(".social-share").fadeToggle();
}
});
$(document).mouseup(function(e) {
var container = $(".social-share");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});

$(".meta--share").click(function() {
event.preventDefault();
$(".social-share").toggle();
});
$(document).mouseup(function(e) {
var container = $(".social-share");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.fadeOut();
}
});
.social-share {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="meta--share" href="#">Share</a>
<ul class="social-share">
<li class="facebook"><a title="Share on Facebook" href="#">Facebook</a></li>
<li class="twitter"><a title="Share on Twitter" href="#">Twitter</a></li>
<li class="linkedin"><a title="Share on Linked" href="#">Linkedin</a></li>
</ul>
</li>
</ul>

Factorize javascript/jquery code for hiding modal when click outside

I have a code that work but I don't know how to factorize it. It seems I could be able to do it as they're basically the same code first for desktyop then for touch devices:
//desktop
$(document).mouseup(function (e)
{
var container = $(".messenger");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.empty();
container.off( 'click', clickDocument );
}
});
// Touch devices like IPAD and IPHONE we can use following code
$(document).on('touchstart', function (e) {
var container = $(".messenger");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.empty();
container.off( 'click', clickDocument );
}
});

Quite easy:
// desktop (mouseup)
// or Touch devices like IPAD and IPHONE we can use following code
$(document).on('mouseup touchstart', function (e)
{
var container = $(".messenger");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.empty();
container.off( 'click', clickDocument );
}
});

Change it to:
var onMouseUp = function (e) {
var container = $(".messenger");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.empty();
container.off( 'click', clickDocument );
}
};
// For Desktop
$(document).mouseup(onMouseUp);
// For devices
$(document).on('touchstart', onMouseUp);

may you can try this:
var eventTouch = function(e){
var container = $(".messenger");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.empty();
container.off( 'click', clickDocument );
}
}
$(document).mouseup(eventTouch);
$(document).on('touchstart', eventTouch);

jquery click outside - $(this) stop works

I wanted to ask, where i have error, it piece of code.
Button class show / hide filter element, and this is ok. But i want to archive "click outside effect" - close filter on some body element click, not filter itself.
$('.button').on('click',function() {
var filters = $('#filters');
if (filters.is(':hidden')) {
filters.show();
} else {
filters.hide();
}
// Now i want to close filter, on click on body element, not filter itself.
// Now, this code below, closes filter, on click on body element, but now .button is not closing filter. So code below is not working...
$(document).mouseup(function (e) {
var container = filters;
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
});
But now, $(document).mouseup(function (e) - it prevents .button, from filters close....
What's wrong ?
Thanks for advice.

Have a look at this:
https://jsfiddle.net/t1nxwvy2/3/
You can use the following to see if the click was inside the button or not:
$(document).mouseup(function (e) {
var container = $('.button');
if (!container.is(e.target) && (container.has(e.target).length === 0)) {
if (!filters.is(e.target) && (filters.has(e.target).length === 0)) {
filters.hide();
}
} else filters.toggle();
});

Close sidebar on click outside

I'm working a site using this Bootstrap example, with a simple slide in sidebar navigation.
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/#
It is slightly modified, so I have a button for the menu to open:
// Opens the sidebar menu
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
And a button for the menu to close:
// Closes the sidebar menu
$("#menu-close").click(function (e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
I want to add functionality, so it will close if I click anywhere outside the sidebar. So far I have this:
// Close the menu on click outside of the container
$(document).click(function (e) {
var container = $("#sidebar-wrapper");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0 // ... nor a descendant of the container
&& event.target.id !== "menu-toggle") // for the functionality of main toggle button
{
container.removeClass("active");
}
});
But it seems to remove the "active" class this way.
Best regards.

So the solution should be that if you click anywhere inside the container the click handler should do nothing and just return. But if the click is outside the container then it should close it.
Below is the click handler code which might help you.
$(document).click(function(e) {
var node = e.target;
// loop through ancestor nodes to check if the click is inside container.
// If yes then return from the handler method without doing anything
while(node.parentNode) {
if (node === container) {
return;
}
node = node.parentNode;
}
container.removeClass('active')
});

Try this
$(document).click(function (e)
{
var container = $("#wrapper");
if (!container.is(e.target) && container.has(e.target).length === 0 && event.target.id!=="menu-toggle")
{
container.addClass("toggled");
}
});
So what basically it is doing is if e is element you want to toggle the class and if the clicked e is also that then the class wil not toggle otherwise it will.

You can use a recursive function that check if a element clicked exists in cointainer from sidebar menu:
function hasElement(node, element) {
return node == element
|| (node.childNodes || []).length && Array.from(node.childNodes)
.filter(x => x.nodeType == 1)
.some(x => hasElement(x, element));
}
$('body').click(function (event) {
var container = Array.from($("#sidebar")); //Add another containers that would be clicked wihtout close sidebar
var exists = container.some(node => hasElement(node, event.target));
if (!exists)
//TODO Close sidebar here...
});

how to check the parent div, from click event on the page from jquery

I want to check if I am clicking inside the div with classname as 'myclass' (in any child inside the div ).
this code is returns only the current control in which we click , I want to check its all parents , if it has div with classname 'myclass'
$("body").click(function (e) {
if (e.target.className !== "myclass") {
doo();
}
alert(e.target.id);
alert(e.target.className);
});

$("body").click(function (e) {
var elem = $('.myClass');
if ((!elem.is(e.target)) && (elem.has(e.target).length === 0)) {
doo();
}
});

Try this SEE DEMO
$('div').on('click',function(){
var $parent = $(this).parent();
if( $parent.hasClass('myClass') ){
alert( $(this).text() );
}
});

you can use closest to find the parent which is having myclass
try this
$("body").click(function (e) {
if($(e.target).closest('.myclass').length == 0 && $(e.target).attr('class') != "myclass"){
doo();
}
});