My site has multiple popovers over a map (just a div with background image) with clickable icons:
When clicking those icons, a popover is shown. This popover has a carousel that contains text with links:
When I click outside the popover, all popovers are hidden. This supposedly works ok. I got the code from this Stack Overflow question.
But the real issue occurs when you click outside the popover to hide it again. The popover is hidden, but it's still in the DOM. This means the links are still clickable!
When I click the plus icon to hide the popover, the popover is hidden (removed?), but when clicking outside the plus (i.e. anywhere on the page), the popover is still present (but not visible) right above </body>.
Please help! This annoys the hell out of me.. :(
Edit: Might be worth mentioned that the popovers are dynamically added:
$('.plus').each(function(i) {
var $self = $(this);
$self.popover({
html: true,
title: false,
placement: function() {
return 'auto left'; // TODO: calculate placing
},
content: function() {
var html = '<div id="carousel-' + i + '" class="carousel slide">';
var list = '<ol class="carousel-indicators">';
var slides = '<div class="carousel-inner">';
var count = 0;
$('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {
// add indicator for slide
list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';
// add html for slide
slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';
// increase counter
count++;
});
// merge all html
html += list + '</ol>' + slides + '</div></div>';
return html;
}
});
I had a similar issue, big headache, and searching I got to this page:
https://github.com/twbs/bootstrap/issues/4215
Apparently when you add Popovers to dynamic content you need to add this option:
selector: '[rel="popover"]'
in your case it would be
$self.popover({
selector: '[rel="popover"]'
html: true,
title: false,
...
This resolved all my "hidden popover clicks detection" issues.
This is what I did in order to prevent elements within the hidden popover from being clicked
$('button.new-history').on('hidden.bs.popover', function () {
$(this).next().remove();
})
The idea being that when the popover is hidden, you should remove it from the DOM.
Hope it helps!
None of the other solutions worked for me because I'm using other functions to only allow one popover at a time, and to hide the popover when it loses focus (they are also dynamically generated).
But I found a very simple solution using css to 'fix' this issue:
.popover.fade {
z-index:-1;
}
.popover.fade.in {
z-index:2;
}
Just make sure the .popover.in has a higher z-index than your other elements, and similarly that the one without .in has a lower z-index.
I faced the same problem and after searching a while in the F12 mode in Chrome, I found the following solution was working for me.
After closing the popover manually with a button:
<button
type=button
class="btn btn-default pull-right"
onclick="$('.mypopoverclass').popover('hide');">
Close
</button>
the content of the popover still was there, invisible and hiding other elements on the page.
I changed the button a little like this:
<button
type=button
class="btn btn-default pull-right"
onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()">
Close
</button>
By adding
$('.popover.fade').remove()
to the button onClick handler, the popover window was removed and no longer hiding elements on the screen. Also, next calls to the popover window, will show it again.
I hope it will work for you as well!
I think you need to "destroy" the popover, not just to "hide" it.
See the API here: http://getbootstrap.com/2.3.2/javascript.html#popovers
Related
This is more of a theoretical question about scope than anything too specific to my code but I'll give an example of what I'm trying to do anyway.
When a user selects something from a dropdown menu, colorbox overlays the screen and presents a hidden <div> on the opening page. No iframe is being used or no external html page being loaded. The <div> presented lives on the same page but is populated on the fly with a selection of images.
Colorbox presents the selection of images wrapped in <div>s. I want the user to be able to select an image and, depending on what they select, populate a form on the page underneath.
How can I get variables from the colorbox inline presentation to a function on the opening page?
I've tried a few things and looked at a few similar examples and nothing seems to work. The examples I've seen are from iframe loads not inline.
function presentDifferentPrintings(cardPresentInfo) {
// prevent submission until we're done here
allowSubmitField = document.querySelector('#allowSubmit');
allowSubmitField.value = 'false';
// clear current hidden overlay div
$( "div" ).remove( ".singleCardInOverlay" );
// iterate through each printing, get set names, multiverseIDs and release dates to present
var printingsNum = cardPresentInfo.printings.split("{|}");
printingsNum.reverse(); // we want to see the latest cards first
$.each(printingsNum, function(index, setCode) {
var setName = setNameCardIsFromField(setCode);
var thisMultiverseID = getMVIDfromSetCode(cardPresentInfo['name'], setCode);
var thisID = getIDfromSetCode(cardPresentInfo['name'], setCode);
// create HTML for each card presentation
var presentSingleCardHTML = "<div class='singleCardInOverlay' id='ovDiv"+thisID+"' onClick(fillInDetailsFromOverlay('"+thisID+"');) >";
presentSingleCardHTML += '<img id="overlayImage" src="<?=$localCardImagePresentFolder?>'+thisMultiverseID+'.jpg" />';
presentSingleCardHTML += '<p class="singleCardTextInOverlay">'+thisMultiverseID+' - '+setName+'</p>';
presentSingleCardHTML += '</div>';
// attach new div to hidden div if we have multiverseid
if (thisMultiverseID != '') {
$(presentSingleCardHTML).appendTo("#hiddenOverlayDiv");
}
});
$.colorbox({ inline:true, href:"#hiddenOverlayDiv", width:'80%', height:'80%', transition: "fade", opacity:0.85, returnFocus: true, trapFocus: true });
}
And here's a very simplified version of the function I'm trying to call that lives on the page that summoned the colorbox:
function fillInDetailsFromOverlay(thisID) {
alert('success');
}
Any ideas?
Solution! After taking a nice break and playing cards with my kid ........
The way I got this working was to call my colorbox with a function assigned to the onComplete event hook that is built in. Instead of using the javascript onClick thingo in the div tag, I'm now listening for a click on any of the images with the 'singleCardInOverlay' class and passing the id for that div (which corresponds to the image selected) to the function.
Amazing what taking a break can do for your coding. I hope this helps someone.
$.colorbox({
inline:true,
href:"#hiddenOverlayDiv",
width:'80%',
height:'80%',
transition: "fade",
opacity:0.85,
returnFocus: true,
onComplete: function() {
$(".singleCardInOverlay").click(function(){
fillInDetailsFromOverlay(this.id);
});
},
trapFocus: true
});
I have two domains that are closely related to each other. Because of this I'm putting a fixed box on the top right corner of the page so that users can quickly jump between the two sites. However I would like to add a page transition to this action so that when the user clicks the link in the box the site will gracefully transition to the new URL.
I know you can do this with internal pages via JQuery Mobile ( http://demos.jquerymobile.com/1.1.0/docs/pages/page-transitions.html ), however the limitation is that the link has to be ajax, and can not be activated to new URL's.
Does anyone know how to accomplish this? Ideally I would like to use the "Flow" or "Slide" transition. However I'll take any example or reference you can provide and adapt it to my needs.
The solution does not necessarily need to be jQuery, it can be javascript, HTML 5, CSS or any other solution that may work.
Thanks,
~Andrew
For me it would work something like this:
Pseudo HTML:
<body>
<div id="page1"> <!-- Content goes here --> </div>
</body>
Pseudo JQuery:
on AJAX complete {
var newID
var oldID
if ($('#page1').length) { // Work out old and new ID's
newID = 'page2'
oldID = 'page1'
} else {
newID = 'page1'
oldID = 'page2'
}
$('body').append('<div id="' + newID +'" style="display:none;">' + DataFromAjaxCall + '</div>') // Append the body with a hidden div containing new content
$('#' + oldID).fadeOut(400, function() { // Fade the old one out and then remove it
$(this).remove();
});
$('#' + newID).fadeIn(400); // Fade the new one in
}
Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?
I'm using jquery Cycle to create a featured content slider. In my pager I have an image from each post and a link to the permalink. I can't link to the page, but I hope this image will give an idea of what I am doing:
My problem is that when I click the permalinks in the right nav, they do not open. The links are formed properly and I'm able to right click and open in a new window. It seems like the slider is intercepting my click as a JS click and not a click on the acutaly href link.
Any one experience this problem?
here is my JS
jQuery('#slideWrap').cycle({
speed: 200,
timeout: 0,
pager: '#featuredNav ul',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + jQuery(slide).find(".featuredSlideImage > img").attr("src") + '" height="50" width="75" />' + jQuery(slide).find(".featuredSlideDesc > h3").html() + ' </li>';
}
});
From http://jquery.malsup.com/cycle/options.html, I would suggest trying the option:
allowPagerClickBubble
And setting it to true instead of its default, false.
I have a navigation list. The effect I am looking for is when the user clicks on a link, an accordion style div is built and displayed by jQuery. Then if the user clicks the same screen, the is deleted from the screen.
Here's some cod that will create an DIV if it is not already there, load it with some HTML from the URL contained in a link's HREF attribute, then turn it into an accordion. If the DIV already exists, it removes it.
$('.navLink').click( function() {
var accordion_id = 'accordion_' + this.id;
var accordion = $('#' + accordion_id);
if (accordion.length > 0) {
accodion.remove();
}
else {
$('<div id="' + accordion_id + '"></div>')
.appendTo('#someDiv')
.load( $(this).attr('href') )
.accordion();
}
return false; // cancel default action of link
});
Yes, I'm quite sure that this is possible. It looks like there may be plugins and third-party tools out there that can help you with this task. This one looks promising: http://jqueryui.com/demos/accordion/