I'm using Bootstrap v3.3.7
I need to click twice to hide a popover.
I have problem like this https://jsfiddle.net/hik200/ejxkv8hb/1/
$('body').on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false; });
I edited your fiddle, you were adding the click listener once on your button click, which did not actually trigger the close function :
function ClosePopover() {
$("#destroy").click(function(){
$("[data-toggle='popover']").popover('hide');
});
console.log('asd');
}
this is good :
function ClosePopover() {
$("[data-toggle='popover']").popover('hide');
console.log('asd')
}
Related
I have multiple popovers which are placed in different cells of a jquery datatable.
//popover needs to be triggered onclick on this i element
<i tabIndex ="0" class="fa fa-info-circle popoverIcon" aria-hidden="true" data-placement="bottom" data-toggle="popover" ></i>
//this is hidden by css
<div class="popover-content hidden"><div>Popover text</div></div>
Popover initialization:
$('#MyDataTable').on('mouseenter', '.popoverIcon', function (event) {
$(this).popover({
html: true,
content: function () {
return $(this).next().html();
},
title: "Comment",
trigger: "manual"
});
});
I want the popover to have all trigger: "click" functionality, but be dismissable by clicking OUTSIDE the popover element area (popover area = the popover box itself or the mentioned i element). I have applied a solution I found here How to dismiss a Twitter Bootstrap popover by clicking outside?
It looks like that. The function to SHOW popover:
$('#MyDataTable').on('click', '.popoverIcon', function (event) {
//if popover closed - open it
if (!popoverOpen) {
$(this).popover('toggle');
popoverOpen = true;
}
});
The function to HIDE popover:
$(document).on('click', function (e) {
if (popoverOpen && !mouseOnPopoverArea) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
popoverOpen = false;
}
});
The strange thing is, it works perfectly, but ONLY with the very first popover I open. When I try to open the second, third, fourth (...) one, nothing is happenning. When I go back to the first one I clicked, it works again. What could be the matter?
$('#MyDataTable').on('click', '.popoverIcon', function (event) {
//if popover closed - open it
if (!popoverOpen) {
$(this).popover('toggle');
popoverOpen = true;
}
});
in this you are calling on click event on only one id so try to assign different ids and on click events on them accordingly
Try to access the pop over by first targeting it's parent element using parent() through $this and then finding the pop over element in it using find()
I'm working on a little vertical accordion and I ran into a snag.
Upon clicking a div, that div opens up to fill the screen... I'm trying to reverse this upon clicking the "close button" div, but it's not working for me.
Here is my code... https://codepen.io/Finches/pen/mpyKrL
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function() {
$(this).parent().parent().removeClass("shutterExpanded");
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
Any help here?
Try following code. Actually it is happening for you clicking each time on ".shutter". Because when you clicking on close button it is also inside of ".shutter" div that why it is collapsing then again opening.
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function(e) {
e.stopPropagation(); // Key line to work perfectly
if ($(this).parent().parent().hasClass("shutterExpanded")) {
$(this).parent().parent().removeClass("shutterExpanded");
};
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code:
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
document.getElementById('#featuresModal1').style.display="none";
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
document.getElementById('#featuresModal2').style.display="none";
});
});
However, the problem is: Even when I close/hide the first modal ('#nextModal12') by clicking the CLOSE button instead of the next, the second modal appears.
I believe this is because the hidden.bs.modal function is picked up and called again even when I'm not clicking the next button. How do I prevent the script from picking up the hidden.bs.modal function indiscriminately?
Try use .one function instead of .on. When you use .on() your callback would be repeating again and again, beacuse you bind it again for each click;
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
$('#featuresModal1').one('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
});
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal2').one('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
});
});
Don't bind hidden.bs.modal again and again on modal click, just bind it once like,
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide');
});
$('#featuresModal1').on('hidden.bs.modal', function () {
$('#featuresModal2').modal('show');
$(this).hide();// you can use hide function
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
});
$('#featuresModal2').on('hidden.bs.modal', function () {
$('#featuresModal3').modal('show');
$(this).hide();
});
Alternatively, you can try
$('#nextModal12').click(function() {
$('#featuresModal1').modal('hide'); // hide first
$('#featuresModal2').modal('show'); // show second
});
$('#nextModal23').click(function() {
$('#featuresModal2').modal('hide');
$('#featuresModal3').modal('show');
});
I have having a little trouble with the slideToggle when I have a link inside of the slideup panel. What I am trying to do is have the ability to press a button and a div will slide up and display related posts and once you press another or the related project button on the page it will close the toggle and reveal another effect that I am using (100% width and heigh popup). The script I am using works perfect but I am running into one problem. When I click a related post inside of the slideToggle it causes the div to slide down instead of going to the page that represents the link.
Here is my code below and an example http://jsfiddle.net/K8vBg/15/.
$(document).ready(function(){
// build a variable to target the #menu div
var menu = $('#menu')
// bind a click function to the menu-trigger
$('#menu-trigger').click(function(event){
event.preventDefault();
event.stopPropagation();
// if the menu is visible slide it up
if (menu.is(":visible"))
{
menu.slideUp(1000);
}
// otherwise, slide the menu down
else
{
menu.slideDown(400);
}
});
$(document).not('.projectHolder-small,#projectSpecs').click(function(event) {
event.preventDefault();
if (menu.is(":visible"))
{
menu.slideUp(400);
}
});
})
If I change .projectHolder-small,#projectSpecs in the .not function to just read #menu then I am able to click the link inside of the panel but the panel will not slideDown when I click another button on the page. The popup from #project specs will just go over the panel instead of closing it.
Is there something I am missing in my script?
Thank you
Try changing the $(document).not().click() to:
$(document).click(function(event){
if(!$(event.target).closest('.projectHolder-small,#projectSpecs').length){
if (menu.is(":visible")){
menu.slideUp(400);
}
}
});
I am using closest() instead of the usual is(), so that even clicking on the children elements of '.projectHolder-small,#projectSpecs' the panel won't close.
I rewrote the script to the following and it works perfect
$(document).ready(function () {
var $frm = $('#menu').hide();
var $bts = $("#menu-trigger").on('click', function () {
var $this = $(this)
$bts.filter(".selected").not(this).removeClass('selected');
$this.toggleClass('selected');
if ($this.hasClass('selected') && $frm.is(':visible')) {
$frm.stop(true, true).slideUp(function () {
$(this).slideDown()
});
} else {
$frm.stop(true, true).slideToggle();
}
});
$bts.filter('.selected').click();
$("#projectSpecs, #menuButton").click(function () {
$bts.filter(".selected").removeClass('selected');
$frm.slideUp();
});
});
I am using the Jquery LightBox plugin. It works fine. I need an dialog box to be opened once i click the close button of the Jquery LightBox. But i couldn do so...Is that possible to track the close event of lightbox and trigger another event?
Please help
Replace _finish function in jquery-lightbox-0.5.js with below code:
function _finish() {
$('#jquery-lightbox').remove();
$('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'visible' });
var callback = settings.onClose;
if($.isFunction(callback)) {
callback.call();
}
}
Add onClose in settings at top in jquery-lightbox-0.5.js file after activeImage;
// Don´t alter these variables in any way
imageArray: [],
activeImage: 0,
onClose: null
Usage :
$('#gallery a').lightBox({ onClose : function() { alert('Hi'); } } );
From the source
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
_finish();
return false;
});
So just add an event handler to #lightbox-secNav-btnClose and it should work
$("body").on("click", "#lightbox-secNav-btnClose", function() {
console.log("lightbox closed");
});
From personal experience I can recommend you to use Colorbox
There you have onClosed property on the init of the colorbox so it's easy as:
$("a.lightbox").colorbox({
onClosed: function() {
console.log('closed')
}
});
This worked for me without modifying anything in lightbox.js:
<div onclick="close_lightbox()">Close Button</div>
function close_lightbox()
{
lightbox.end();
}