I already have my code to toggle show and hide the div but whenever I try to add the Hide when clicked outside, it conflicts the toggle code, I need to toggle the div_menu but also hides it when clicked outside just like the facebook drop down menu
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
});
You can do something like
$(document).ready(function () {
$(".toggle_menu").click(function (e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e){
if(!$(e.target).closest('.toggle_menu, .div_menu').length){
$(".div_menu").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle_menu">toggle_menu</button>
<div class="div_menu">
<div>some random content menu</div>
</div>
<div style="height: 100px; background: lightgrey;">some other content goes here</div>
use e.target to find the current targeted element ,and using is() Check the current matched set of elements against a selector
$(document).ready(function () {
$(document).click(function (e) {
if ($(e.target).closest(".toggle_menu,.div_menu").length) {
$(".div_menu").toggle();
e.preventDefault();
} else {
$(".div_menu").hide();
}
});
});
DEMO
$("body").click
(
function(e){
if ($(e.target).is($(".toggle_menu"))) {
$(".div_menu").toggle();
}else{
$(".div_menu").hide();
}
}
);
try this
$(document).click(function(e){
if($(e.target).parents('.div_menu').length == 0 && $(e.target).attr('class') != "div_menu"){
$(".div_menu").toggle();
}
});
$(document).ready(function() {
$(".toggle_menu").click(function(e) {
$(".div_menu").toggle();
e.preventDefault();
});
$(document).click(function(e) {
$(".div_menu").hide();
});
});
Related
Here is the example for UI element construct,
HTML
<div class='wrap'>
<a class='inner-link' href="#">Link</a>
</div>
CSS
.wrap
{
background:#CDD4E0;
width:300px;
height:100px;
padding:20px;
}
.wrap:hover
{
background:#868B93;
}
jQuery
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function () {
alert("Handler for inner link click");
});
What I want to do is to prevent the container with the class .wrap click event when I click the link inside.
You can reference this fiddle example.
Current code fire $('.wrap').click when I do for $('.inner-link').click.
Add if to check if the target does not contain class inner-link.
UPDATE: Oh, the comment has a better way to solve it.
$(".wrap").click(function (e) {
if (e.target.className !== "inner-link") { // add this
alert("Handler for wrap container click.");
}
});
$(".inner-link").click(function (e) {
e.stopPropagation(); // or add this
alert("Handler for inner link click");
});
Try to use event.stopPropagation
Your jQuery codes should be modified as below:
$('.wrap').click(function () {
alert("Handler for wrap container click.");
});
$('.inner-link').click(function (event) {
event.stopPropogation();
alert("Handler for inner link click");
});
thanks #riceEater for the idea with the class. I solved it with this:
var elem = $('.parentElem');
elem.on("click",function(e) {
var hitElementClass = e.target.className;
if (hitElementClass.includes("my-wrapper-class")) {
elem.find("input").trigger("click");
}
});
I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.
$( document ).ready(function() {
$(function(){
$(".slide-in").addClass("active");
console.log($(".slide-in"));
});
});
I think the solution could be some kind of toggle system, but i can't figure out how to?
Thank you!
Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.className=='slide-in') {
$(".slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.className=='button'){
$(".slide-in").addClass("active");
isOpened = true;
}
});
Better is to use IDs. So your code would be:
<div id="slide-in"></div>
<div id="button"></div>
and the javascript:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
}
});
You'll also need to change the CSS from classes to IDs
Try this.
var someDiv = document.getElementById('yourDiv');
someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
//do something
}
how to make div click-able?
https://jsfiddle.net/zer00ne/jne1rasb/
$(document).ready(function() {
$('.button').on('click dblclick', function(e) {
$('.slide-in').toggleClass('active');
e.stopPropagation();
});
$(document).on('click', function() {
$(".slide-in").removeClass("active");
});
});
I think this should do the trick.
Edit:
$( document ).ready(function() {
$(".button").on("click",function(){
if($(".slide-in").hasClass("active")){
$(".slide-in").removeClass("active");
}else{
$(".slide-in").addClass("active");
}
});
});
I am doing toggle class to hide and show, toggle class is working fine, but when i click that "Close" link and outside the div the current displaying div was not getting hide, i am new to jquery. help me if any one know this answer, i have attacted a code below.
Html code
<div class="NoViews">
<img src="~/Content/Theme/images/fav.png" alt="">
<p>Shortlist</p>
<span>1</span>
<div class="shortlistProperty">
<div class="shortlistHeader">
<h5>Shortlisted properties (1)
<p class="flRight"><a class="closeShortlist" href="#">Close</a></p>
</h5>
</div>
<div class="shortlistBody">
Div content
</div>
</div>
</div>
jquery code
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function () {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
});
$(".closeShortlist").click(function () {
$('.shortlistProperty').toggle();
$('.shortlistProperty').toggle(false);
});
$(".searchView").click(function () {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
});
$(".closemySearch").click(function () {
$('.mySearchProperty').toggle();
$('.mySearchProperty').toggle(false);
});
});
In this, i want when i click that close link my current div have to get hides and when i click out side the current div have to close.
You have to stop the event bubble. Check the code.
$(document).ready(function () {
$(".shortlistProperty").hide();
$(".mySearchProperty").hide();
$(".NoViews").click(function (e) {
$('.shortlistProperty').toggle();
$('.mySearchProperty').hide();
e.stopPropagation();
});
$('.shortlistProperty').click(function (e) {
e.stopPropagation();
});
$(".closeShortlist").click(function (e) {
$('.shortlistProperty').toggle();
e.stopPropagation();
});
$(".searchView").click(function (e) {
$('.mySearchProperty').toggle();
$('.shortlistProperty').hide();
e.stopPropagation();
});
$(".closemySearch").click(function (e) {
$('.mySearchProperty').toggle();
e.stopPropagation();
});
$('body').click(function (e) {
$('.shortlistProperty').hide();
});
});
I have this code in my script:
$(document).ready(function() {
$('*').not('div#user').click(function() {
$('div#userSettings').hide();
});
$('div#user').click(function() {
$('div#userSettings').toggle();
$('div#profileSettings').toggleClass('rotate');
});
});
I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.
the toggleclass does still work in this, just that the div#userSettings does not appear at all
You can stop the event propagation
$(document).ready(function () {
$(document).click(function (e) {
$('#userSettings').hide();
})
$('#user').click(function (e) {
e.stopPropagation();
$('#userSettings').toggle();
$('#profileSettings').toggleClass('rotate');
});
$('#userSettings').click(function (e) {
e.stopPropagation();
});
});
Demo: Fiddle
I want to show a div on link click and hide if click outside the link or div.
login
<div class="login-panel">
<input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
<input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
<input type="submit" value="Login" class="loginBtn">
</div>
initially div is hidden. and script is
$(document).ready(function() {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function(e){
if(e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
}
else {
$(".login-panel").hide();
}
});
});
when I click on link div shows and overlaps some other elements, and when I click outside the body it dies.
But the problem is when I click on input box to enter username login-panel div get hides.
why div hide?
any guidance will be appreciated.
http://jsfiddle.net/thirtydot/F4p2x/15/
$(document).ready(function() {
$("#login").click(function(e) {
$(".login-panel").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('.login-panel, .login-panel *')) {
$(".login-panel").hide();
}
});
});
You should do it like this:
http://jsfiddle.net/VWENB/1/
$("#login").click(function(e) {
$("div.login-panel").toggle();
e.stopPropagation();
});
$("body").click(function(e) {
if (e.target.className == "field") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closest function of jQuery (see here) in order to test if you are in your parent element :
if(e.target.className == "login" || $(e.target).closest(".login-panel").length === 1) {
...
}
PROBLEM is when i click on input box to enter username login-panel div
get hides. why div hide?
Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation() which you may use in the else part of body.onclick.
That because your input lies inside #login div, so if you click inside this div it will hide. So you can use jquery :not selector to specify those excluded elements
$(document).ready(function () {
$("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.className == "login" || e.target.className == "login-panel") {
//alert("do't hide");
} else {
$(".login-panel").hide();
}
});
});
DEMO
Here you go:
$(document).ready(function () {
$("#login").click(function () {
$("div.login-panel").toggle();
});
$("body").click(function (e) {
if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
$(".login-panel").hide();
}
});
});
You were using the wrong selector in your if to check if a click on the body wasn't targeting a input element.
Fiddle
Just find mouse when the click event occur,
<script type="text/javascript">
find_mouse = false;
$(document).ready(function()
{
$('.login-panel').hover(function(){
find_mouse=true; // if mouse on login-panel
}, function(){
find_mouse=false; // not on login panel
});
$("body").click(function(){
if(! find_mouse) // if not on login panel
$('.login-panel').hide();
});
});
</script>
As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;
$("body").click(function (e) {
var $sender = $(e.target);
if ($sender.closest(".login-panel").length) {
return ;
}
$(".login-panel").hide();
});
Edit : update the condition with closest as it is correct function.
Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.