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();
}
});
Related
I have a button:
<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>
That controls when this div is open or closed to show 'more options'.
<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>
And I use a Knockout.js observable to keep it open when the data refreshes inside the div. I don't want a data refresh to collapse the div. The issue is when I do this and keep the div open, the button thinks that the div is closed. So the next time the user clicks the button, the div closes real quick and opens back up again, requiring two clicks on the button to get the div to close.
The expected behavior is to keep the div open during a data refresh, but have the button know that the div is open and close it with just one click.
I've set the CSS collapse with knockout in the div and I'm looking for a similar way to set the button for it to know that the div is not collapsed.
I've noticed that when the button is clicked to expand the div, the aria-expanded attribute is set to true where it didn't exist when the button is initially rendered; and when the button is clicked to collapse the div, the CSS property 'collapsed' is added to the button. I've played around with adding and changing these via knockout with no success.
It should be noted that the button is refreshed with the data.
I've decided to remove the bootstrap toggle button functionality and just go with the jQuery toggle in combination with knockout. The jQuery way just offers more control.
<button type="button" class="btn btn-sm btn-primary"
data-bind="click: $root.ChangeMoreOptions">
More Options
</button>
<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>
Knockout:
//Open or close div
self.ChangeMoreOptions = function () {
if (self.IsCollapsed() === true) {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(false);
} else {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(true);
}
}
//Keep div open on refresh if it is already open
//Search for 'none' in the style display: none
self.FixMoreOptions = function () {
if (($('#MoreOptionsDiv').attr('style').search('none') > -1)
&& (self.IsCollapsed() === false)) {
//Toggle closed div back to open
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
}
}
i am quite new with this delegate thing for dynamic elements. so today i tested again with a generated dynamic template from some example in stackover for popover.
here is my dynamic html content.
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
and then, i have this script on my js
$('#resultContent').on('click','#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
resultContent is the div here where i add .html all my html codes.
i manage to attached the delegate event (i think) but is acting strange as my 1st click on the testpop button, the popover won't show. Until i press the 2nd and 3rd time only it will pop up. Am i doing this delegating wrong?
credits for this test code: HTML inside Twitter Bootstrap popover
You forgot to add a trigger in the popover options. The data-trigger in the element doesn't do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:
$("[data-toggle=popover]").popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
EDIT
Popover should generally be initialized on page load:
$("[data-toggle=popover]").popover();
Putting it inside a click event will not enable popover on the element until you click it first.
Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.
function addPopover(selector){
$(selector).popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
}
And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:
addPopover("[data-toggle=popover]");
In your code, you are configuring the popover on click event of the button.
So, this is how it happens.
Click the anchor link
Initialize the popover with options. (This doesnt mean it displays the popover, it is just a initialization)
Click on the popover again (Popover is already bound because of the earlier call and then it shows)
Also, you need to ensure the popover is not bound to the element again and again to avoid repeated popover bindings.
$('#resultContent').on('click', '#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
}).popover('show');
// Explicitly show the popover.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="resultContent">
<a id="testpop" class="btn btn-primary" data-placement="bottom" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
</div>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
After rendering code in browser the anchor tag is generated as
<a onclick="alert();" id="ctl00_RightContent_lnkSaveTop" title="Select Mail then Click to Send..." class="btn btn-u" data-rel="tooltip" data-container="body" data-toggle="popover" data-placement="top" data-content="Select Mail then Click to Send..." href="javascript:__doPostBack('ctl00$RightContent$lnkSaveTop','')" style="float: right" data-original-title="Send Email" disabled="disabled">
Send Mail
</a>
I have written jquery as below lines of code
$(document).ready(function () {
$('#<%= lnkSaveTop.ClientID%>').click(function () {
if ($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Basically I want that if disabled button is clicked, then the tooltip should be displayed.
Try:
if ($(this).attr('disabled') === "disabled") {
alert('No need to click, it\'s disabled.');
}
if you intend to use readonly attribute, it's the same, replace 'disabled' with 'readonly '
What you can do is have a custom data attribute on your input button which is a blank string. Then when the mouse enters the button you remove the title and place it inside of your empty data attribute and remove title, this will stop the tooltip from appearing. You then listen for the click even on the input and then move copy the text from the data attribute to the title and that should do the trick
Here is my jsFiddle : https://jsfiddle.net/44vof888/
jQuery
$(function () {
$('input').mouseenter(function () {
$(this).data('title', this.title)
this.title = '';
});
$('input').on('click', function () {
this.title = $(this).data('title');
});
});
html
<input type="button" data-title="" value="Hello" title="Half an update" readonly="readonly"></input>
I am having trouble getting the addThis buttons to show inside of a bootstrap popover. The code is in the html data attribute and the addThis script is firing correctly, but the buttons just don't show even though the code can be seen in it via inspector.
I've done a jsfiddle here:
http://jsfiddle.net/XW9bk/1/
<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>
$('#share').click(function() {
$('.vote, .favorite, #share').popover('hide');
$('#share').popover('toggle');
})
$(document).ready(function() {
var addthis_config = {"data_track_addressbar": true};
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})
I've got it working in a way with:
$('#share').click(function() {
$('.vote, .favorite').popover('hide');
$('#share').popover('toggle');
addthis.toolbox('.addthis_toolbox');
})
The problem now is there is a delay of several seconds before the buttons are displayed in the popover. When the popover is hidden and then reopened, the buttons aren't there and again take a while to appear.
Anyone know what could be causing this?
It seems to be a timing issue with the script loading, combined with the fact that it is essentially dynamic content. This will work for your situation:
HTML
<div class="hidden">
<div class="the-content"></div>
</div>
<br />
<br />
JAVASCRIPT
$(document).ready(function () {
var addthis_config = {
"data_track_addressbar": true
};
var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';
var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';
$('.the-content').append(theCode).promise().done(function () {
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
setTimeout(function() { $('body').append(theButton); }, 1000);
$('body').popover({
selector: '[rel=popover]',
html: true,
content: function () {
return $('.the-content').html();
}
});
});
});
});
FIDDLE
I achieved what you were trying to do successfully, except that the problem was that share buttons were not clickable. Someone contacted AddThis support, this is the response they got;
Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.
I solved this problem by loading the AddThis buttons after the popover has been shown. See the code below;
<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>
<script language="JavaScript">
$("[rel=popover]").popover({
html: true
});
$("[rel=popover]").on('shown.bs.popover', function() {
$('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
$.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
});
</script>
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