Close popup div when clicked outside it - javascript

I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this.
Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.
<input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
<input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />
This is the form.
<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">
This is the script.
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide(); });
$('input#NewRow').click(function () {
$('input#NewRowCopy').show();
$('input#NewRow').hide();
$('#div_fieldWorkers').slideDown("fast");
});
$('input#NewRowCopy').click(function () {
$('input#NewRow').show();
$('input#NewRowCopy').hide();
$('#div_fieldWorkers').slideUp("fast");
});
$("html").click(function (e) {
if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {
}
else
{
$("#input#NewRowCopy").hide();
$("#input#NewRow").show();
$("#div_fieldWorkers").slideUp("fast");
}
I an trying to hide the second button when clicked outside the form.. but not working..

Try
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide();
$('#NewRow').click(function (e) {
$('#NewRowCopy').show();
$('#NewRow').hide();
$('#div_fieldWorkers').stop(true, true).slideDown("fast");
e.stopPropagation();
});
$('#NewRowCopy').click(function (e) {
$('#NewRow').show();
$('#NewRowCopy').hide();
$('#div_fieldWorkers').stop(true, true).slideUp("fast");
e.stopPropagation();
});
$(document).click(function (e) {
var $target = $(e.target);
if ($target.closest('#div_fieldWorkers').length == 0) {
$("#NewRowCopy").hide();
$("#NewRow").show();
$("#div_fieldWorkers").stop(true, true).slideUp("fast");
}
})
});
Demo: Fiddle

Related

How to remove focus from button after closing javascript confirm box

I have a button with a bootstrap element on it.
<button title="delete" type="button" class="btn btn-default btn-sr" data-confirm="Are you sure to delete this item?"><span class="glyphicon glyphicon-trash white"></span></button></a>';
It has a css property which I color it red.
When user clicks the delete button, a JavaScript confirmation will come out.
The problem is whenever i click cancel, the button will be focused. How do I remove the focused button?
Here is the jQuery code:
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
</script>
Maybe could you try to blur() the button?
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
$(this).blur(); // to make the focus disappear
}
});
</script>
$(this).blur();
removes the focus
$(this).blur();
over
document.activeElement.blur()

Removing search action when clicked (without action being completed)

I created a search form, which opens a search field when clicked on search-icon.
So I've turned off the search function so the icon is clickable.
var $searchBtn = $search.find('button');
$searchBtn.on('click', function(e) {
e.preventDefault();
});
But now if I return the search function when I've clicked on the search icon
$('.icon-search'.on('click', function(e)
{
$searchBtn.unbind('click');
});
I can't click on the cross anymore to close the searchfield because it has got the search function again.
So my question is:
is it possible to put on my .icon-cross a e.preventDefault(); on click without it completing the searchfunction first?
HTML Code:
<form method="GET" action="search" class="form-inline">
<div class="input-group">
<input type="search" name="query" id="query" class="form-control" placeholder="'Uw zoekopdracht...">
{/if}">
<span class="input-group-btn">
<button class="btn btn-default icon-search" type="submit"></button>
</span>
</div>
</form>
You use the same button to do two things. You options are to use two different buttons and toggle their display. No worrying about what code is attached since they are separate.
You can add one click event that can handle both tasks
$searchBtn.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass("icon-search")) {
//search logic
} else {
//cross logic
}
});
or you can use event delegation to handle the clicks (which is doing the above check under the covers);
$searchBtn.parent()
.on('click', ".icon-search", function(e) {
//search logic
})
.on('click', ".icon-cross", function(e) {
//cross logic
});

Twitter-bootstrap popover does not allow content below to function

I've got a page with 3 Twitter-bootstrap popover buttons that on click display a hidden div with HTML content. I've added an X in the top right corner to close the popover box.
My problem occurs when a popover is opened up and overlays content below it, and then is closed, the content below it i.e. a button that links to another page is no longer accessible and you cannot click it anymore.
In the inspector I can see that the hidden popover, the div with content, is there sitting on top of the button I want to click so I cannot access it.
Curious thing is that when I click the actual popover button to close the popover it is totally gone and I can click the button below but when I click the closing X I cannot.
How can I fix this?
Link to page: (http://bit.ly/1j1AW4i)
Button code:
<button id="popoverBtn1" class="popoverThis btn btn-default" data-placement='bottom'>
Learn More <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
<div id="popoverContent1" class="hide">
<strong>Ideal for:</strong> Qualified clients who want to continue having the convenient access to funds that a home equity line of credit provides.
<br /><br />
<strong>What:</strong> Apply for a new Access 3<sup>®</sup> Equity Line and transfer your current balance to the new line. <a target="_blank" href="https://www.suntrust.com/PersonalBanking/Loans/EquityLinesOfCreditAndLoans/EquityLineOfCredit">Learn More</a> about our Access 3<sup>®</sup> Equity Line.
<br /><br />
<strong>Get started:</strong> <a target="_blank" href="https://www.suntrust.com/portal/server.pt?space=Redirect&CommunityID=1805&ui_ProdGroup=IL&ui_ProdSubGroup=EQLN&ui_Product=INETACCX&POPNAC=T">Apply Online</a>, Call <span class="blue">877-748-4059</span>, or stop by your <a target="_blank" href="https://www.suntrust.com/FindUs">local branch</a>.
</div>
Script code:
$('#popoverBtn1').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent1').html(),
});
$('#popoverBtn2').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent2').html(),
});
$('#popoverBtn3').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent3').html(),
});
$('.popoverThis').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').popover('hide');
}
});
Here is one option:
$('#popoverBtn1').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent1').html(),
});
$(document).on('click','.close',function (e) {
$(this).closest('.popover').css('z-index','-1');
$(this).closest('.popover').prev('button').popover('hide');
});
$('button.popoverThis').on('show.bs.popover', function () {
$(this).next('.popover').css('z-index','100');
});
Example:
http://www.bootply.com/106588
Update
use this instead:
$(document).on('click','.close',function (e) {
$(this).closest('.popover').hide();
$(this).closest('.popover').prev('button').popover('hide');
});
http://www.bootply.com/106678
Try changing:
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').popover('hide');
}
});
to:
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').click();
}
});

hide and show image on button click

I have two image and two button in a div, Now process is when i click on button 1 then image 1 show same as in button 2.. now my problem is i want both image hide when i click in any part of body.. Now my problem is when i click on body it will hide but not able to show images on button click.
Fiddle Here
HTML
<input type='button' id='btn1' value='button1'>
<img src="abc.jpg" id='img1'>
<input type='button' value='button2' id='btn2'>
<img src="abc.jpg" id='img2' >
Js
$('#btn1').click()(function(){
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click()(function(){
$('#img2').show();
$('#img1').hide();
});
$('body').click()(function(){
$('#img1').hide();
$('#img1').hide();
});
Try:
$('#btn1').click(function (e) {
e.stopPropagation();
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click(function (e) {
e.stopPropagation();
$('#img2').show();
$('#img1').hide();
});
$('body').click(function () {
$('#img1,#img2').hide();
});
jsFiddle example
You were using the click function incorrectly, plus your click events on the buttons were also bubbling up the DOM to the event you placed on the body.
try this
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#btn1') || !target.is('#btn2')) {
$('#img1').hide();
$('#img1').hide();
}
});

Detect button click inside jQuery mobile collapsible

I'm using jQuery mobile and I was trying to add a button inside a collapsible but the problem is that when i click on the button the click event is not fired but instead the block gets uncollapsed or collapsed.
I tried the code below but it didn't work
$(document).on('pagebeforeshow', '#page', function () {
$('#header').on('click', '#start', function (e) {
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
<h4 id='header'>
<input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
</h4>"
</div>
that's because your button exists inside the collapsible section. What you can do is prevent the section from collapsing when the button is clicked i.e get the id of the target clicked and if it's the id="start" then e.preventDefault(); so something like this:
$('#header').on('click', function (e) {
var id = e.target.id;
if(id=="start"){
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
});

Categories

Resources