Hide content when clicking outside div with jquery - javascript

I'm using jquery to togle content with a button, I would like to hide the content when I click outside my "contentcone" div. The HTML is the following
<div class="togglecone">
</div>
<div class="contentcone">
<div class="contentleft">
<div class="title">
Cone
</div>
<div class="maincopy">
Hello my friends this is a really nice cone that can be placed anywhere
</div>
<a href="https://www.mcnicholas.co.uk/" class="button">
View on website
</a>
</div>
<div class="contentright"> <img src="images/cone.png" alt=""/>
</div>
</div>
This is the script
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
});
http://jsfiddle.net/thomastalavera/SCKhf/914/

This should do it:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(document).on("click", function(e) {
if( $(e.target).is(".togglecone") ) {
$(this).toggleClass("expandedcone");
$content.slideToggle();
} else {
$content.slideUp();
}
});
});
DEMO

You need to set a click event on document to close the box. I tried to keep your original click function intact.
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).addClass("expandedcone");
$content.slideDown();
});
$(this).on('click', function(e) {
if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
return;
}
if ($(".togglecone").hasClass('expandedcone')) {
$content.slideUp();
$(this).removeClass("expandedcone");
}
});
});
http://jsfiddle.net/SCKhf/925/

A simple and pretty blunt way to do this is:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
e.stopImmediatePropagation();
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
$("body").on("click", function(e){
if ($(".contentcone").is(':visible')) {
$(".togglecone").click();
}
});
$(".contentcone").on("click", function(e){
e.stopImmediatePropagation();
return false;
})
});
But note it has a lot of disadvantages, is just a blunt solution to your problem, it must be tweaked to be ok as a permanent choice.
Edit (to answer the question in comment):
Sure, I know more than 1, each depending on your layout. You can:
a) Instead of the "body" part, make a selector for whatever elements you want to toggle event one. This works ok on layouts with a small number of big (as size on screen) elements.
b) Add one more condition to the "body" part, where you get mouse position and use it to see if the mouse is in the place you want. You can do this with e.pageX/e.pageY, or you can find relevant relative position to an element here jQuery get mouse position within an element.

This should do it with lesser code:
$(document).mousedown(function (e) {
var container = $(".togglecone");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});

Related

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Jquery on hover and out

I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle

Fire 2 actions with ONE click on a button

I'm trying to assign two actions to a button in jQuery. The button is supposed to:
open a hidden div, and...
scroll down to get said div into view.
While both actions are working on the button, they currently require 2 clicks. On the first click the div appears, but to scroll it into view I need to click the button a second time.
Any suggestions how I am going wrong?
jQuery
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});
HTML
<div id="impressum-footer">
<div class="footer">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap"> ...
You need to put the scrollTo in the fadeIn completion callback handler. That way callTo is performed on completion of the fadeIn rather than, essentially, at the same time. Currently you seem to also be placing a callback function where another parameter is to go (either duration or options object depending on which method signature you are using). Not sure why you have the css change there at all.
Try something like this:
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn({
duration: 100, // or whatever duration you want to use
complete: function() {
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
}
});
});
});
if you want to assign 2 different actions on one button, set it 2 different classes (or IDs), lets say
<div class="action1 action2">
After, in jQuery you will be able to do:
$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });
JsFiddle: http://jsfiddle.net/g2wdd2cb/
I have now managed to get it going. The approach as explained by #euvl was the one...
I changed my code (the scrolling part) after I realized it wasn't working. The final (working) code now looks like this:
jQuery:
$(document).ready(function () {
"use strict";
$('.footer-action-1 a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
});
});
$(document).on('click','.footer-action-2 a', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
HTML:
<div id="impressum-footer">
<div class="footer footer-action-1 footer-action-2">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap">
The only problem now is that it scrolls a little too far. The moment I add an offset it stops working.

Append <div> with click and remove with click

I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default
Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});
Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});
this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/
When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().
you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})
remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

I'm currently using popovers with Twitter Bootstrap, initiated like this:
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});
As you can see, they're triggered manually, and clicking on .popup-marker (which is a div with a background image) toggles a popover. This works great, but I'd like to also be able to close the popover with a click anywhere else on the page (but not on the popover itself!).
I've tried a few different things, including the following, but with no results to show for it:
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});
How can I close the popover with a click anywhere else on the page, but not with a click onthe popover itself?
Presuming that only one popover can be visible at any time, you can use a set of flags to mark when there's a popover visible, and only then hide them.
If you set the event listener on the document body, it will trigger when you click the element marked with 'popup-marker'. So you'll have to call stopPropagation() on the event object. And apply the same trick when clicking on the popover itself.
Below is a working JavaScript code that does this. It uses jQuery >= 1.7
jQuery(function() {
var isVisible = false;
var hideAllPopovers = function() {
$('.popup-marker').each(function() {
$(this).popover('hide');
});
};
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).on('click', function(e) {
// if any other popovers are visible, hide them
if(isVisible) {
hideAllPopovers();
}
$(this).popover('show');
// handle clicking on the popover itself
$('.popover').off('click').on('click', function(e) {
e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
});
isVisible = true;
e.stopPropagation();
});
$(document).on('click', function(e) {
hideAllPopovers();
isVisible = false;
});
});
http://jsfiddle.net/AFffL/539/
The only caveat is that you won't be able to open 2 popovers at the same time. But I think that would be confusing for the user, anyway :-)
This is even easier :
$('html').click(function(e) {
$('.popup-marker').popover('hide');
});
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
I had a similar need, and found this great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover. He also has some usage examples here. Basically it will change the popover into an interactive component which will close when you click elsewhere on the page, or on a close button within the popover. This will also allow multiple popovers open at once and a bunch of other nice features.
Plugin can be found here.
Usage example
<button rel="clickover" data-content="Show something here.
<button data-dismiss='clickover'
>Close Clickover</button>"
>Show clickover</button>
javascript:
// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();
The accepted solution gave me some issues (clicking on the '.popup-marker' element of the opened popover made the popovers not work afterwards). I came up with this other solution that works perfectly for me and it's quite simple (I'm using Bootstrap 2.3.1):
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$('.popup-marker').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function(e) {
if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
$('.popup-marker').popover('hide');
}
});
UPDATE: This code works with Bootstrap 3 as well!
read "Dismiss on next click"
here http://getbootstrap.com/javascript/#popovers
You can use the focus trigger to dismiss popovers on the next click, but you have to use use the <a> tag, not the <button> tag, and you also must include a tabindex attribute...
Example:
<a href="#" tabindex="0" class="btn btn-lg btn-danger"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">
Dismissible popover
</a>
All of the existing answers are fairly weak, as they rely on capturing all document events then finding active popovers, or modifying the call to .popover().
A much better approach is to listen for show.bs.popover events on the document's body then react accordingly. Below is code which will close popovers when the document is clicked or esc is pressed, only binding event listeners when popovers are shown:
function closePopoversOnDocumentEvents() {
var visiblePopovers = [];
var $body = $("body");
function hideVisiblePopovers() {
$.each(visiblePopovers, function() {
$(this).popover("hide");
});
}
function onBodyClick(event) {
if (event.isDefaultPrevented())
return;
var $target = $(event.target);
if ($target.data("bs.popover"))
return;
if ($target.parents(".popover").length)
return;
hideVisiblePopovers();
}
function onBodyKeyup(event) {
if (event.isDefaultPrevented())
return;
if (event.keyCode != 27) // esc
return;
hideVisiblePopovers();
event.preventDefault();
}
function onPopoverShow(event) {
if (!visiblePopovers.length) {
$body.on("click", onBodyClick);
$body.on("keyup", onBodyKeyup);
}
visiblePopovers.push(event.target);
}
function onPopoverHide(event) {
var target = event.target;
var index = visiblePopovers.indexOf(target);
if (index > -1) {
visiblePopovers.splice(index, 1);
}
if (visiblePopovers.length == 0) {
$body.off("click", onBodyClick);
$body.off("keyup", onBodyKeyup);
}
}
$body.on("show.bs.popover", onPopoverShow);
$body.on("hide.bs.popover", onPopoverHide);
}
https://github.com/lecar-red/bootstrapx-clickover
It's an extension of twitter bootstrap popover and will solve the problem very simply.
For some reason none of the other solutions here worked for me. However, after a lot of troubleshooting, I finally arrived at this method which works perfectly (for me at least).
$('html').click(function(e) {
if( !$(e.target).parents().hasClass('popover') ) {
$('#popover_parent').popover('destroy');
}
});
In my case I was adding a popover to a table and absolutely positioning it above/below the td that was clicked. The table selection was handled by jQuery-UI Selectable so I'm not sure if that was interfering. However whenever I clicked inside the popover my click handler which targeted $('.popover') never worked and the event handling was always delegated to the $(html) click handler. I'm fairly new to JS so perhaps I'm just missing something?
Anyways I hope this helps someone!
I give all my popovers anchors the class activate_popover. I activate them all at once onload
$('body').popover({selector: '.activate-popover', html : true, container: 'body'})
to get the click away functionality working I use (in coffee script):
$(document).on('click', (e) ->
clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
$(".popover.in").prev().popover('hide')
if clickedOnActivate
$(".popover.in").prev().each () ->
if !$(this).is($(e.target).closest('.activate-popover'))
$(this).popover('hide')
)
Which works perfectly fine with bootstrap 2.3.1
Even though there are a lot of solutions here, i'd like to propose mine as well, i don't know if there is some solution up there that solves it all, but i tried 3 of them and they had issues, like clicking on the popover it self makes it hide, others that if i had another popover buttons clicked both/multiple popovers would still appear (like in the selected solution), How ever, This one fixed it all
var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
var container = $(".popover.in");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
if( curr_popover_btn != null )
{
$(curr_popover_btn).popover('hide');
curr_popover_btn = null;
}
container.hide();
}
}
// Hide popovers when out of focus
$('html').click(function(e) {
hide_popovers(e);
});
$('.popover-marker').popover({
trigger: 'manual'
}).click(function(e) {
hide_popovers(e);
var $popover_btns = $('.popover-marker');
curr_popover_btn = this;
var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
return ( popover_btn !== curr_popover_btn );
});
$($other_popover_btns).popover('hide');
$(this).popover('toggle');
e.stopPropagation();
});
I would set the focus to the newly created pop-over and remove it on blur. That way it's not needed to check which element of the DOM has been clicked and the pop-over can be clicked, and selected too: it will not lose its focus and will not disappear.
The code:
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
// set the focus on the popover itself
jQuery(".popover").attr("tabindex",-1).focus();
e.preventDefault();
});
// live event, will delete the popover by clicking any part of the page
$('body').on('blur','.popover',function(){
$('.popup-marker').popover('hide');
});
Here is the solution which worked very fine for me, if it can help :
/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
if (!compareTo || this.length !== compareTo.length) {
return false;
}
for (var i = 0; i < this.length; ++i) {
if (this[i] !== compareTo[i]) {
return false;
}
}
return true;
};
/**
* Activate popover message for all concerned fields
*/
var popoverOpened = null;
$(function() {
$('span.btn').popover();
$('span.btn').unbind("click");
$('span.btn').bind("click", function(e) {
e.stopPropagation();
if($(this).equals(popoverOpened)) return;
if(popoverOpened !== null) {
popoverOpened.popover("hide");
}
$(this).popover('show');
popoverOpened = $(this);
e.preventDefault();
});
$(document).click(function(e) {
if(popoverOpened !== null) {
popoverOpened.popover("hide");
popoverOpened = null;
}
});
});
Here's my solution, for what it's worth:
// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {
// Loop through each popover on the page
$("[data-toggle=popover]").each(function() {
// Hide this popover if it's visible and if the user clicked outside of it
if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
$(this).popover("hide");
}
});
});
I had some problem to get it working on bootstrap 2.3.2.
But i sloved it this way:
$(function () {
$(document).mouseup(function (e) {
if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
$('.popover').each(function(){
$(this).prev('.popInfo').popover('hide');
});
}
});
$('.popInfo').popover({
trigger: 'click',
html: true
});
});
tweaked #David Wolever solution slightly:
function closePopoversOnDocumentEvents() {
var visiblePopovers = [];
var $body = $("body");
function hideVisiblePopovers() {
/* this was giving problems and had a bit of overhead
$.each(visiblePopovers, function() {
$(this).popover("hide");
});
*/
while (visiblePopovers.length !== 0) {
$(visiblePopovers.pop()).popover("hide");
}
}
function onBodyClick(event) {
if (event.isDefaultPrevented())
return;
var $target = $(event.target);
if ($target.data("bs.popover"))
return;
if ($target.parents(".popover").length)
return;
hideVisiblePopovers();
}
function onBodyKeyup(event) {
if (event.isDefaultPrevented())
return;
if (event.keyCode != 27) // esc
return;
hideVisiblePopovers();
event.preventDefault();
}
function onPopoverShow(event) {
if (!visiblePopovers.length) {
$body.on("click", onBodyClick);
$body.on("keyup", onBodyKeyup);
}
visiblePopovers.push(event.target);
}
function onPopoverHide(event) {
var target = event.target;
var index = visiblePopovers.indexOf(target);
if (index > -1) {
visiblePopovers.splice(index, 1);
}
if (visiblePopovers.length == 0) {
$body.off("click", onBodyClick);
$body.off("keyup", onBodyKeyup);
}
}
$body.on("show.bs.popover", onPopoverShow);
$body.on("hide.bs.popover", onPopoverHide);
}
This question was also asked here and my answer provides not only a way to understand jQuery DOM traversal methods but 2 options for handling the closing of popovers by clicking outside.
Open multiple popovers at once or one popover at a time.
Plus these small code snippets can handle the closing of buttons containing icons!
https://stackoverflow.com/a/14857326/1060487
This one works like a charm and I use it.
It will open the popover when you click and if you click again it will close, also if you click outside of the popover the popover will be closed.
This also works with more than 1 popover.
function hideAllPopovers(){
$('[data-toggle="popover"]').each(function() {
if ($(this).data("showing") == "true"){
$(this).data("showing", "false");
$(this).popover('hide');
}
});
}
$('[data-toggle="popover"]').each(function() {
$(this).popover({
html: true,
trigger: 'manual'
}).click(function(e) {
if ($(this).data("showing") != "true"){
hideAllPopovers();
$(this).data("showing", "true");
$(this).popover('show');
}else{
hideAllPopovers();
}
e.stopPropagation();
});
});
$(document).click(function(e) {
hideAllPopovers();
});
Another solution, it covered the problem I had with clicking descendants of the popover:
$(document).mouseup(function (e) {
// The target is not popover or popover descendants
if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
$("[data-toggle=popover]").popover('hide');
}
});
I do it as below
$("a[rel=popover]").click(function(event){
if(event.which == 1)
{
$thisPopOver = $(this);
$thisPopOver.popover('toggle');
$thisPopOver.parent("li").click(function(event){
event.stopPropagation();
$("html").click(function(){
$thisPopOver.popover('hide');
});
});
}
});
Hope this helps!
If you're trying to use twitter bootstrap popover with pjax, this worked for me:
App.Utils.Popover = {
enableAll: function() {
$('.pk-popover').popover(
{
trigger: 'click',
html : true,
container: 'body',
placement: 'right',
}
);
},
bindDocumentClickEvent: function(documentObj) {
$(documentObj).click(function(event) {
if( !$(event.target).hasClass('pk-popover') ) {
$('.pk-popover').popover('hide');
}
});
}
};
$(document).on('ready pjax:end', function() {
App.Utils.Popover.enableAll();
App.Utils.Popover.bindDocumentClickEvent(this);
});
#RayOnAir, I have same issue with previous solutions. I come close to #RayOnAir solution too. One thing that improved is close already opened popover when click on other popover marker. So my code is:
var clicked_popover_marker = null;
var popover_marker = '#pricing i';
$(popover_marker).popover({
html: true,
trigger: 'manual'
}).click(function (e) {
clicked_popover_marker = this;
$(popover_marker).not(clicked_popover_marker).popover('hide');
$(clicked_popover_marker).popover('toggle');
});
$(document).click(function (e) {
if (e.target != clicked_popover_marker) {
$(popover_marker).popover('hide');
clicked_popover_marker = null;
}
});
I found this to be a modified solution of pbaron's suggestion above, because his solution activated the popover('hide') on all elements with class 'popup-marker'. However, when you're using popover() for html content instead of the data-content, as I'm doing below, any clicks inside that html popup actually activate the popover('hide'), which promptly closes the window. This method below iterates through each .popup-marker element and discovers first if the parent is related to the .popup-marker's id that was clicked, and if so then does not hide it. All other divs are hidden...
$(function(){
$('html').click(function(e) {
// this is my departure from pbaron's code above
// $('.popup-marker').popover('hide');
$('.popup-marker').each(function() {
if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
$(this).popover('hide');
}
});
});
$('.popup-marker').popover({
html: true,
// this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
content: function() { return $('#html-'+$(this).attr('id')).html(); },
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
});
I came up with this:
My scenario included more popovers on the same page, and hiding them just made them invisible and because of that, clicking on items behind the popover was not possible.
The idea is to mark the specific popover-link as 'active' and then you can simply 'toggle' the active popover. Doing so will close the popover completely.
$('.popover-link').popover({ html : true, container: 'body' })
$('.popover-link').popover().on 'shown.bs.popover', ->
$(this).addClass('toggled')
$('.popover-link').popover().on 'hidden.bs.popover', ->
$(this).removeClass('toggled')
$("body").on "click", (e) ->
$openedPopoverLink = $(".popover-link.toggled")
if $openedPopoverLink.has(e.target).length == 0
$openedPopoverLink.popover "toggle"
$openedPopoverLink.removeClass "toggled"
I was trying to make a simple solution for a simple issue. Above posts are good but so complicated for a simple issue. So i made a simple thing. Just added a close button. Its perfect for me.
$(".popover-link").click(function(){
$(".mypopover").hide();
$(this).parent().find(".mypopover").show();
})
$('.close').click(function(){
$(this).parents('.mypopover').css('display','none');
});
<div class="popover-content">
<i class="fa fa-times close"></i>
<h3 class="popover-title">Title here</h3>
your other content here
</div>
.popover-content {
position:relative;
}
.close {
position:absolute;
color:#CCC;
right:5px;
top:5px;
cursor:pointer;
}
I like this, simple yet effective..
var openPopup;
$('[data-toggle="popover"]').on('click',function(){
if(openPopup){
$(openPopup).popover('hide');
}
openPopup=this;
});
Add btn-popover class to your popover button/link that opens the popover. This code will close the popovers when clicking outside of it.
$('body').on('click', function(event) {
if (!$(event.target).closest('.btn-popover, .popover').length) {
$('.popover').popover('hide');
}
});
An even easier solution, just iterate through all popovers and hide if not this.
$(document).on('click', '.popup-marker', function() {
$(this).popover('toggle')
})
$(document).bind('click touchstart', function(e) {
var target = $(e.target)[0];
$('.popup-marker').each(function () {
// hide any open popovers except for the one we've clicked
if (!$(this).is(target)) {
$(this).popover('hide');
}
});
});
$('.popForm').popover();
$('.conteneurPopForm').on("click",".fermePopover",function(){
$(".popForm").trigger("click");
});
To be clear, just trigger the popover
This should work in Bootstrap 4:
$("#my-popover-trigger").popover({
template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
trigger: "manual"
})
$(document).click(function(e) {
if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
$("#my-popover-trigger").popover("toggle")
} else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
$("#my-popover-trigger").popover("hide")
}
})
Explanation:
The first section inits the popover as per the docs: https://getbootstrap.com/docs/4.0/components/popovers/
The first "if" in the second section checks whether the clicked element is a descendant of #my-popover-trigger. If that is true, it toggles the popover (it handles the click on the trigger).
The second "if" in the second section checks whether the clicked element is a descendant of the popover content class which was defined in the init template. If it is not this means that the click was not inside the popover content, and the popover can be hidden.
Try data-trigger="focus" instead of "click".
This solved the problem for me.

Categories

Resources