I want to open a form on click of modify. I also want form to disappear when i click outside the form. When i use mouseleave event for that, the form is getting open and close automatically and i am failing to fill the form. I am not getting which event to use here.
JS
$(document).ready(function() {
$("#div1").load("compare-form-site.html");
});
$( ".m-search" ).click(function() {
$( "#modify" ).show( "blind",700 );
$( "#bank" ).hide();
$( ".slider" ).hide();
$( "#type" ).hide();
$( "#sort" ).hide();
});
$(".m-search").mouseleave(function(){
$('#modify').hide( );
});
HTML
<ul>
<li class="m-search">
Modify Search
<i class="fa fa-search-plus" aria-hidden="true">
</i>
<div id="modify" class="modify">
<div id="div1">
</div>
</div>
</li>
</ul>
You can compare to the target element and check if you click outside the form or in it. I f outside then hide the form.
$(document).on('click', function(e){
var $target = $('.modify');
if($target.is($(e.target)) && !$trigger.has(e.target).length) {
$('.modify').hide();
}
})
A working fiddle would be better for all to help you.
Here is an working example that should be help you:
// open the form
$('.modify').on('click', function(e) {
$(this).parent().find('.dialog').fadeIn();
});
// close the form (button inside form)
$('.close').on('click', function(e) {
$(this).parents('.dialog').fadeOut();
});
// hide the form if you click outside the form
$(document).mouseup(function (e) {
var container = $(".dialog");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
ul li button {
display: block;
}
.dialog {
display: none;
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
background: blue;
}
.dialog .close {
float: right;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Modifiy Search
<button class="modify">Test</button>
<div class="dialog">
<span class="close">Close me</span>
Im a test dialog
</div>
</li>
</ul>
mouseleave doesn't react on click but on the current pointer position. You have to add a click (mousedown) listener to e.g. document to listen to click events outside
Related
Here is what the UI piece looks like
I had the trashcan working fine on click but that was when I didn't have to have a click event on the blue div. Now that I also have a click event on the blue div, when I click the trashcan, I am getting the blue div object instead of the trashcan object. I tried some z-index tricks, but that didn't work.
Any help appreciated.
<td id="ea-13" class="activityTableCell">
<div style="width:90px; margin-left:0px" class="eventTimeSpan"></div>
<div id="NewActivityContainer-13" class="activityContainerExisting">
<div data-uid="57386445" class="label label-sm label-info newActivityClass point" style="width:59px; top:-1px; left:30px; z-index:4000" title="Mobile Game Party">
Mobile Game Party
<div data-isactivity="1" data-packageid="" data-elid="57386445" class="xRemove" style="left:46px;z-index:8000"><i class="fa fa-trash font-red" title="Remove"></i>
</div>
</div>
</div>
</td>
Click Code:
$(document).on("click", ".newActivityClass", function(){
console.log(this);
...snip...
}
$(document).on("click", ".xRemove,.aRemove", function(){
...snip...
}
you can try event.stopPropagation()
$(document).on("click", ".xRemove,.aRemove", function(event){
event.stopPropagation();
// code here
});
source : https://api.jquery.com/event.stoppropagation/
Yes as stated earlier, event.stopPropagation() does the job for you.
For JsFiddle code: https://jsfiddle.net/peacock/r0kk5ps9/
$(document).on("click", "#inner", function(e){
alert("clicked inner");
e.stopPropagation();
});
$(document).on("click", "#outer", function(e){
alert("clicked outer");
e.stopPropagation();
});
#outer {
width : 100px;
height : 100px;
background-color: #777777;
}
#inner {
position: relative;
top : 50%;
left:50%;
width : 30px;
height : 30px;
background-color: #232323;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
</div>
</div>
In my application I want to resize a window when user clicks on panel-heading, but that heading contains a child element- button which has another event handler binded on. What I need to do is, when user click on that button, no resize function will be called. I tried many variations, but none of them worked.
HTML:
<div class="panel-heading" style="cursor:pointer">
<div class="pull-right">
<button type="button" class="btn btn-danger btn-xs" id="btn-subject-remove"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
And my jq is:
$('#btn-subject-remove').on('click',btnRemoveSubjectsClick);
$('#subscribers-row .panel-heading').on('click',btnResizeClick);
What I have tried, but none of them worked:
$('#subscribers-row .panel-heading').off('click','#btn-subject-remove',btnResizeClick);
$('#btn-subject-remove').off('click',btnResizeClick);
$('#subscribers-row .panel-heading').on('click',btnResizeClick).children().click(function(e){return false});
I also tried checking in btnResizeClick function what element was clicked, and if it was remove button then return false, but the clicked element is still panel-heading
Any suggestions?
Bind a click event on the children and use e.stopPropagation() to block the parent click event.
In a simple example:
$(function() {
$('div').on('click', function() {
$(this).toggleClass('redBg');
});
$('div>*').on('click', function(e) {
e.stopPropagation();
});
});
div {
background: green;
width: 200px;
height: 200px;
}
span {
display: block;
height: 50px;
background: yellow;
}
.redBg {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
With some text
<span> in a span </span>
</div>
I'm playing around with building a basic modal window and i want it do dissapear when i click the edges. So my problem in it's most basic form:
<div style="width:100%;height:100%;" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
What is the best way to achieve this? To use unnested divs? html/css magic?
HTML:
<div style="width:100%;height:100%;" class="outerModal">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
JavaScript:
$(document).on("click", ".outerModal", function(evt) { //listen for clicks
var target = $(evt.target ||evt.srcElement); //get the element that was clicked on
if (target.is(".outerModal")) { //make sure it was not a child that was clicked.
//hide dialog
}
});
Example:
JSFiddle
When you hide the parent tag, it automatically hides the childen tag as well, You should first contain the child div into variable and after that hide the parent div and append that stored child div into parent tag something like this.
HTML
<div id="result">
<div style="width:100%;height:100%;" id="parentDiv" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;" id="childDiv">
does not hide all onclick
</div>
</div>
</div>
javaScript
function hideAll(){
var childDiv = document.getElementById('childDiv'); //contain child div
var parDiv = document.getElementById('parentDiv');
parDiv.style.display = 'none'; //hide parent div
parDiv.parentNode.appendChild(childDiv); //append child div
}
DEMO
Assuming that "parentDiv" is to be the background and "childDiv" is to be the actual modal content, the best way I have found is to separate the divs entirely.
HTML
<div id="parentDiv" onclick="hideAll()"> </div>
<div id="childDiv" >
does not hide all onclick
</div>
Javascript using jQuery
function hideAll(){
/* The Parent Div will hide everything when clicked, but the child won't */
$('#childDiv').fadeOut(1000, function(){
$('#parentDiv').fadeOut(1000);
});
}
CSS
#parentDiv {
background: black;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
}
#childDiv {
display: block;
position: relative;
background: white;
height: 200px;
width: 200px;
z-index: 101
}
Here is a working example.
Hope this helps at all.
See this fiddle:
http://jsfiddle.net/eZp9D/
$(document).ready(function () {
$('#parentDiv').click(function (e) {
if ($(e.target).prop('id') == "parentDiv") {
$(this).hide();
}
});
});
You can use basic jQuery and style it accordingly with CSS.
Check this example.
If you want to have it disappear by clicking outside of the dialog window, make sure that onClick you perform this action:
$( "#dialog_id" ).dialog( "close" );
I have 5 pieces of a image in a container which i have to drop in another container to complete the image. After the image is dropped in another container i want to add a different class to that image depending upon its ID. so that this image piece will stick to the previous image present in this container.
I am able to implement the drag and drop event and add a single class to each image after drop event. what changes i need to make in my code to add a different class to eachimage depending upon its ID
My code
<style>
.add-style {
position:absolute;
}
.north-style {
width: 375px;top: 10px;left: 11px;
}
.south-style {
width: 375px;top: 158px;left: 11px;
}
.east-style {
width: 163px;top: 10px;left: 223px;height: 250px;
}
.west-style {
width: 163px;top: 9px;left: 11px;height: 249px;
}
.center-style {
width: 126px;top: 71px;left: 135px;
}
</style>
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: "div"
});
$( "#sortable2" ).sortable({
connectWith: "div",
stop: function( event, ui ) {
ui.item.addClass( "add-style" )
}
});
$( "#sortable1, #sortable2" ).disableSelection();
});
</script>
Bodypart of code
<body>
<div class="row-fluid" >
<div class="span4">
<div class="span1"></div>
<div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
<legend>Collect Coupon parts</legend>
<span>1st part</span>
<img id="north-img" class="ui-state-highlight" src="images/demo/north.png" >
<span>2nd part</span>
<img id="south-img" class="ui-state-highlight" src="images/demo/south.png" >
<span>3rd part</span>
<img id="east-img" class="ui-state-highlight" src="images/demo/east.png" >
<span">4th part</span>
<img id="west-img" class="ui-state-highlight" src="images/demo/west.png" >
<span>5th part</span>
<img id="center-img" class="ui-state-highlight" src="images/demo/center.png">
</div>
</div>
<div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">
<legend>Canvas section</legend>
</div>
</div>
</body>
First change your classes to the following.
Two example shown, change for the other 3 too.
.north-img-style {
width: 375px;top: 10px;left: 11px;
}
.south-img-style {
width: 375px;top: 158px;left: 11px;
}
Then in this part of your code add these two lines
stop: function( event, ui ) {
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style');
}
the var theID grabs the id of the element, and then we just addClass with the same ID but add -style to it. So this will work for all five of your different classes.
EDIT
Yep, you can add more than one class at a time. Just separate with a comma like so:
var theID = ui.item.attr('id');
ui.item.addClass(theID + '-style', 'add-style');
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});
placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
FIDDLE
Try this,
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});
try using
if( !$('.theDiv' ).is( ':visible' ) )
instead of
if ( !$('.theDiv:hidden') )
try this
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
I don't think you can target document with a .click handler like that.
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
HTML:
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle