I have a link which opens a popover, and in the popover I load content from a div.
The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.
So the set up looks like this :
Button and content :
<i class="fa fa-share"></i> Share
<div id="share_this_btns" class="hidden">
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
<div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>
Popover init
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
return $('#share_this_btns').html();
},
placement : 'bottom'
});
The buttons turn up just fine and also show the count - however, they can't be clicked.
I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID).
Can you please advise?
EDIT//
It seems to work every now and then without me changing anything. So the scripts seem to run, maybe it is an issue with how the elements are layered?
Ok I figured it out. I cannot just load sharethis data into the popover, so what I did is this :
I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();
For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init.
After that, however, the popover isn't positioned correctly because the width changes after the load. So I also wrote a function that resizes everything. It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.
The two sharethis scripts are already loaded in the header.
The final body code looks like this :
Button that opens popover
<div id="btnParent_head">
<button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
<i class="fa fa-thumbs-o-up"></i> Pledge
<button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>
Javascript/JQuery
$(document).load(function(){
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
var text = '';
text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
return text;
},
placement : 'bottom',
callback : function(){
reloadStBtns(resizePopover,$('#btnParent_head .popover'),$('#shareHead'));
}
});
});
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
function reloadStBtns(callback,popover,parent) {
stButtons.locateElements();
setTimeout(function(){
callback(popover,parent);
},500);
}
function resizePopover(popover, parent) {
var i_width = parent.outerWidth();
var i_swidth = popover.outerWidth();
var i_nleft = (i_width - i_swidth)/2
popover.css({'left':i_nleft});
}
I wish there was a better solution than doing the setTimeout, but I couldn't find anything.
It doesn't look like you have linked the share buttons up to anything. Try wrapping each span pointing to a resource in an anchor tag e.g.:
<span class='st_facebook_hcount margin-10' displayText='Facebook'></span>
Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster.
Related
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>
I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});
EDIT: Here is my HTML code. It works like this jquery plugin where .expand-wrapper is the contact form which is hidden off screen and .expand-btn is the little flap that is on the side of the screen and clickable.
<div class="expand-wrapper">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Contact
<div class="expand-form">
<?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?>
</div>
</div>
This sounds like an issue where your data-clicks attribute isn't initialized on your element (as you are setting it at the end of your first click and then it appears to work as expected).
Try initializing it on your .expand-btn element as follows :
<a href="#" class="expand-btn" data-clicks='false'>...</a>
Or if you have multiple expand button elements, you can initialize them when your page is loaded using jQuery :
$(function(){
$('.expand-btn').data('clicks',false);
});
I have almost identical multiple divs on a page. They all have graphs inside I want some of them to have popovers when they are hovered.
I want to decide for each div if the popover is displayable or not. Is there a property that I can include inside options such as "diplay: false" ?
HTML
<div id="{{graph.id}}" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
JS
var options = {
html: true,
placement: 'top',
trigger : 'hover',
content: function() {
return $('#info-chart-' + currentObj.id).html();
}
}
$(currentObj.id).popover(options);
You can add some class to those elements on which you don't want popup like nopop class.
<div id="{{graph.id}}" class="nopop" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
Now change the jquery code.
$(currentObj.id).not(".nopop").popover(options);
You can check here --> JsFiddle
I looked around and tried many different options to get this working but somehow I cant find a solution.
I have a boostrap popover window that will load() external url.
Everything works OK when I click the popup button first time but once I close the popover, the query function will not reload on click once the window has been closed.
Ideally, the popover window will be reloaded with fresh data every time the popover is called by a click.
my button:
<a class="btn btn-default btn-sm pop-class"
data-container="body"
data-toggle="popover"
data-placement="left"
id="{{ instance.id }}"></a>
Here is my script
$('.pop-class').popover({
html: true,
title: function() {
return $("#my-head").html();
},
content: function() {
$('#hidden-input').val(this.id);
var id = this.id + '#container';
return $( "#my-content" ).load( "/mypage/"+id );
}
});
Update:
Scenario:
This app has an external html form that the user can load as needed. As this form is dynamic and will allow the user to also update current data the form is loaded on a fly with the instance data.
As the user can close the popover at any time and return back later, the load() function should always load new data based on the instance ID or load a empty form for new entries.
TOTALLY UPDATED ANSWER
If I understood you task, I offer you not to use a bootstrap (it's not that it is designed for).
There is a snippet based on JQuery Ui. (JQuery UI Dialog docs)
There is a button that opens a dialog with an <iframe> that loading some web page each time dialog opens.
If you do not need an iframe, you could load any other contents instead.
$(function () {
// Setting up the dialog
$('#dialog1').dialog({
// Hidden for now
autoOpen: false,
// Title
title: 'My External Form',
// Width in px
width: 790,
// Dialog close event handler
close: function() {
// Looking for an iframe inside it
$(this).find('iframe').
// Clearing its contents
attr('src', 'about:blank');
}
});
// Looking for our dialog
$('#dialog1').
// Looking for JQuery UI initialized dialog (up the DOM tree)
closest('.ui-dialog').
// Looking for dialog title (down the DOM tree)
find('.ui-dialog-title').
// Prepending the title with an Font Awesome icon
prepend('<i class="fa fa-list fa-lg grey"></i>');
// Subscribing to the click on the button
$('button.show-dialog').click(function () {
// Caching the JQuery button object
var $button = $(this);
// Getting ID of the associated dialog from 'data-dialog' attribute
var dialogId = $button.data('dialog');
// If there is an ID
if (typeof(dialogId) != 'undefined')
{
// Getting a JQuery UI dialog by ID
var $dialog = $('#' + dialogId);
// Opening the dialog
$dialog.dialog('open');
// Loading a content to the iframe
$dialog.find('iframe').attr('src', 'http://apple.com');
}
});
});
.dialog
{
display: none;
}
.ui-dialog-titlebar i.fa {
margin-right: 0.75em;
}
.ui-dialog .dialog.ui-dialog-content
{
padding: 0;
overflow: hidden;
}
.dialog iframe
{
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<div class="container">
<button class="show-dialog" data-dialog="dialog1"><i class="fa fa-arrow-left fa-lg orange">My Button</i></button>
<div class="dialog" id="dialog1">
<iframe id="dialog1-frame" name="dialog1-frame" width="100%" height="100%"></iframe>
</div>
</div>
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>