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);
Related
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>
This should close any divs listed in the array when you click anywhere out side those divs, but it isn't working.
If I was to click anywhere that was not div1, div2, div3, div4 then all those divs should close.
$(document).mouseup(function (e)
{
var container = $["#div1," "#div2", "#div3", "#div4"];
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
I can make it work for individual divs in their own script tags, but then I must reproduce this code several times, which isn't very neat.
$(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();
}
});
$(document).mouseup(function (e)
{
var container = $("#div3");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
$(document).mouseup(function (e)
{
var container = $("#div4");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
}
});
What is the correct solution for grouping these #divs?
Your selector is wrong - use round brackets and put all comma separated ids between the quotes like this:
var container = $("#div1, #div2, #div3, #div4");
Then all functions concerning container variable will affect all those elements.
Try this:
$(document).mouseup(function (e)
{
var container = ["#div1", "#div2", "#div3", "#div4"];
for(var i=0;i<container.length;i++)
{
if (!$(container[i]).is(e.target)
&& $(container[i]).has(e.target).length === 0)
{
$(container[i]).hide();
}
}
});
You can do it in this way.
JS:
$(document).not($("#div1, #div2, #div3, #div4")).on('click',function(){
$(".test").hide();
})
HTML :
<div id="div1" class="test" style="background-color:red">111</div>
<div id="div2" class="test" style="background-color:blue">22</div>
<div id="div3" class="test" style="background-color:green">333</div>
<div id="div4" class="test" style="background-color:black">444</div>
<div id="div5" style="background-color:black">44455555555</div>
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();
});
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...
});
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();
}
});