Remove class after click outside the div - javascript

I know this is a old question , but i've searched a lot .
i want to remove class after clicked outside the like body . here is my code :
Html
<div id="user-login-top">Enter</div>
<div id="user-login-wrapper" class="">visible</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
and here is the fiddle : Fiddle
Appreciate your help !?
Thx

It is because of the propagation of event.
When you click on user-login-top, the first click handle is triggered which is adding the class, then because of event propagation the handler attached to the document is triggered where it satisfies the if condition and removes the class.
One possible solution here is to use event.stopPropagation()
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").addClass("wide");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
Another is
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").toggleClass("wide");
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>

<section>
<div class="click-text">
click inside and outside me
</div>
</section>
const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
if (concernedElement.contains(event.target)) {
console.log("Clicked Inside");
} else {
console.log("Clicked Outside / Elsewhere");
}
});

Related

Just for first click the "img" class rotation is work but not for another clicks

Just for first click the img class rotate to 180deg and post class show, but i want for second click if rotate 180deg change to 0deg again and post class show.
Post class show is working but rotate just for first click work.
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').css('transform', 'rotate(0deg)')) {
$('.img').css('transform', 'rotate(180deg)');
} else if ($('.img').css('transform', 'rotate(180deg)')) {
$('.img').css('transform', 'rotate(0deg)');
}
});
});
});
$('.img').css('transform', 'rotate(0deg)') will always resolve to true because it returns the jQuery chaining for $(".img"). It sets the transform property and does not evaluate. See http://api.jquery.com/css/ for reference.
To fix this you could add a class to check if it is already rotated:
$(document).ready(function() {
$(".op-cl").click(function() {
$(".post").toggle("slow", function() {
if ($('.img').hasClass('rotated')) {
$('.img').css('transform', 'rotate(0)');
$('.img').removeClass('rotated')
} else {
$('.img').css('transform', 'rotate(180deg)');
$('.img').addClass('rotated');
}
});
});
});
IMO better to use toggle when you want to toggle between two values :
$(document).ready(function(){
$(".op-cl").click(function() {
$('.img').toggle(function () {
$("#user_button").css({transform: "rotate(0deg)"});
}, function () {
$("#user_button").css({transform: "rotate(180deg)"});
});
});
});
img{
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='op-cl'>op-cl</button>
<br>
<img class='img' src='https://pbs.twimg.com/profile_images/604644048/sign051.gif' style='transform:rotate(0deg)'/>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
$(document).ready(function() {
$(".op-cl").click(function() {
var click=1;
$(".post").toggle("slow", function() {
if (click % 2 !=0) {
$('.img').css('transform', 'rotate(180deg)');
} else if (click % 2 ==0) {
$('.img').css('transform', 'rotate(0deg)');
}
click++;
});
});
});

jQuery hide element when click in datepicker

I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}

Removing class if click outside of div (targetting class)

I have a menu where user clicks on link and list appears via .addClass( "show-nav" ).
Here is jsFiddle with JS code:
jQuery(".nav-js-trigger").each(function(){
this.onclick = function() {
var hasClass;
hasClass = jQuery(this).next().hasClass( "show-nav" );
jQuery('.show-nav').removeClass('show-nav');
if (hasClass === false) {
jQuery(this).next().addClass( "show-nav" );
}
}
});
I want to remove the class show-nav if the user clicks outside of the div with class show-nav. How do I do this?
I have seen examples of e.target div ID but not class, particularly not a scenario like this.
You can add an listener to the element with an event.stopPropagation() on it, and another listener to the body, to capture this event if not intercepted before.
Something like this:
$(".show-nav").on("click", function(event){
event.stopPropagation();
});
$("body").on("click", function(event){
$(".show-nav").hide(); // or something...
});
To simplify your use-case, here is a JSFiddle.
$(".trigger").on("click", function(event)
{
$(".menu").toggle();
event.stopPropagation();
});
$(".menu").on("click", function(event)
{
event.stopPropagation();
});
$(document).on("click", function(event)
{
$(".menu").hide();
});
.menu
{
display: none;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
menu
<div class="menu">Hello</div>
$(document).on("click", function(e) { if ($(e.target).is(".trigger") === false) {
$(".menu").hide();
}
});

Remove class when clicked outside the parent element

In the HTML shown below, I want to display input after click on "ورود" and hide it when I click outside it's parent <div>.
HTML
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible
<input type="text" value="name">
</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
here's my fiddle : fiddle
You can use jQuery closest() method as follows:
$(document).on("click", function (e) {
if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
$("#user-login-wrapper").removeClass("wide");
}
});
Updated Fiddle
Or If you can move #user-login-top to the parent of input you can simply do:
$(document).on("click", function (e) {
if (!$(e.target).closest("#user-login-wrapper").length)
$("#user-login-wrapper").removeClass("wide");
});
Well you have put the logic for all the targets except the text box that is wrapped in user-login-wrapper, So just add it with your logic and it works
Example:
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper")==false
&& $(e.target).is('#user-login-top')==false
&& $(e.target).is('#user-login-wrapper *')==false) {
$("#user-login-wrapper").removeClass("wide");
}
});
Demo Fiddle

how to stop nested event calling in jquery

Here, i am beginner in jquery and i am building a web page in which i am facing an issue.
in this, when i click the article1 or article2 then section and page click event are automatically called. i want to stop calling them.
here is page.html
<div id="page">
<div id="section">
<div id="article1">this is article 1</div>
<div id="article2">this is article 2</div>
</div>
</div>
here is page.js
$('#page').on('click', function () {
alert('page');
});
$('#section').on('click', function () {
alert('section');
});
$('#article1').on('click', function () {
alert('article1');
});
$('#article2').on('click', function () {
alert('article1');
});
here is page.css
#page {
height: 600px;
width: 600px;
background-color:brown;
}
#section {
height: 100px;
width: 100px;
background-color:red;
}
#article1 {
background-color:green;
}
#article2 {
background-color:yellow;
}
please suggest any solution.
Thanks in Advance.
Use evt.stopPropagation():
$('#page').on('click', function (evt) {
evt.stopPropagation();
alert('page');
});
$('#section').on('click', function (evt) {
evt.stopPropagation();
alert('section');
});
$('#article1').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (evt) {
evt.stopPropagation();
alert('article1');
});
JSFiddle
using
event.stopPropagation();
here is a jsfiddle.
http://jsfiddle.net/Lsn8n0yp/
use stopPropagation() man.
$(document).ready(function(){
$('#page').on('click', function (e) {
e.stopPropagation();
alert('page');
});
$('#section').on('click', function (e) {
e.stopPropagation();
alert('section');
});
$('#article1').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
$('#article2').on('click', function (e) {
e.stopPropagation();
alert('article1');
});
})

Categories