hide a div when clicking outside 2 div jquery - javascript

i have a problem with js
i have a icon and a form
my form is appear when i click on icon
i want to my form was hide when clicked outside form
now when i click on icon to show my form , js hide my form becuase it outside of my form
any body can help me?
mycode for show/hide when click on icon:
$(document).ready(function(){
$("#icon").click(function(){
$("#form-subscribe").animate({
height: 'toggle'
});
});
});
and my code for hide form when clicked outside of form:
$(document).ready(function()
{
$("#main").mouseup(function(e)
{
var subject = $("#form-subscribe");
if(e.target.id != subject.attr('id') && !subject.has(e.target).length)
{
$("#form-subscribe").animate({
height: 'hide'
});
}
});
});

You can accomplish this by inspecting the e.target DOM node inside of a jQuery $.contains() method.
Link to jQuery Contains Method: https://api.jquery.com/jQuery.contains/
Here is a JSFiddle: https://jsfiddle.net/iamjpg/eq43eve5/
HTML:
<div>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<form id="form">
<div>
<input>
</div>
<div>
<input>
</div>
<div>
<input>
</div>
</form>
Javascript:
$('.fa').on('click', function() {
$('#form').show();
})
$(document).on('click', function(e) {
// If e.target is not inside of the form container AND not
// the icon triggering the initial showing of the form,
// hide the form div.
if (!$.contains(document.querySelector('#form'), e.target) && !$(e.target).hasClass('fa')) {
$('#form').hide();
}
})

Related

How to bind click event to element hasn't specific child using jquery?

I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});

Show div after button click jquery

Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?
JS:
$(document).ready(function(){
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").toggle();
});
});
CSS:
.comment {
display:none;
}
HTML:
<?php foreach ($result as $key => $row): ?>
<div class="ui-btn-text">
<button class="commentbtn" data-rel="button">comment</button>
<div id="createcomment" class="comment" data-theme="a">
<form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
<div class="content">
<textarea rows="1" name="text" id="text" class="foo"></textarea>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:
$(".btn-info").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).closest(".comment").children(".comment").show();
});
You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
// Console log the element
console.log($(this).closest(".comment").children(".comment"));
// Console log not showing the right element. So you need to get the
// sibling of the clicked button
// Instead of doing - $(this).closest(".comment").children(".comment").show();
// You can do the following
$(this).siblings("div.comment").show();
});
.closest() - looks at the element itself and its parents for a match.
.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Example With .show();
Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)
Example With .toggle();
UPDATE:
Example with .comment shown on load
Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").show();
});
JSFiddle demo

How to hide form by mouse click beyond the form area withou JQuery

I've the follwoing form:
<form method="get">
<!-- This is form's content -->
</form>
I want to hide the form by mouse click beyond the form area. I'm trying to set window.onclick event handler but this handler is override others onlcick handler on my page. I need to do this WITHOUT JQUERY. Thanks.
Give your form an Id and add use e.target.id in addEventListener:
<form method="get" id="myform">
<!-- This is form's content -->
Dummy content
</form>
<script>
window.onclick = function(e) {
alert('other handlers');
}
window.addEventListener('click', function(e) {
if (e.target.id != "myform") {
document.getElementById('myform').style.display = 'none';
}
});
</script>
Working demo: http://jsfiddle.net/6bewY/

Get the div id / class when windows.location is fired

I have a clickable div (windows.location) and I am trying to display a modal popup when this div is clicked.
here is my div box:
<div class="category_box" onclick="window.location='/Products/#cityName/#categoryName'">
<div class="category_box_catName">
#link
</div>
<div class="category_box_NumOfProds">
#Resources.Categories_GetByCity_NumProdsText
</div>
</div>
I was trying to get the class of this div when it clicked but could not make it work:
if ($(event.target).hasClass('div[class*=category_box]')) {
$('#mdlPopup').show();
}
Then I was trying to change the onclick and to add inside it $('#mdlPopup').show();
<div class="category_box" onclick="$('#mdlPopup').show(); window.location='/Products/#cityName/#categoryName'">
...
but this is also not working for me.
I removed the windows.location from the div and use this code to make the div clickable. then I can get the class from the div using:
$(document).ready(function () {
$('[class^=category_box]').click(function () {
$('#mdlPopup').show();
window.location = $(this).find("a").attr("href");
return false;
});
});

call function when user clicks outside of div

How can I call a function when the user clicks outside of a div?
The function is going to hide the div and some other elements on the page.
A simple example:
HTML
<div id="target">
Your div
<span>A span</span>
<div>
Another child div
</div>
</div>
jQuery
function hideDiv(e) {
if (!$(e.target).is('#target') && !$(e.target).parents().is('#target')) {
$('#target').hide();
}
}
$(document).on('click', function(e) {
hideDiv(e);
});
Working sample
Checkout the JQuery outside events plugin:
http://benalman.com/projects/jquery-outside-events-plugin/

Categories