I am trying to copy text to clipboard on click of button.
I am using below library for this but the only things lacking with that library is that it is not shown how to display tooltip when content is copied:
https://www.npmjs.com/package/angular-clipboard
I have tried answers from below questions but those answer doesn't seems to work so i ended up using this above library:
AngularJS copy to clipboard
how to get clipboard data in angular JS
I want to show my tooltip exactly the way as shown on this below question answer:
Tooltips + Highlight Animation With Clipboard.js Click
So I kinda got it working.
Unfortunately we have to use some js to do it if you resort to using bootstrap tooltips.
Here is a plunkr that solves the problm.
Basically, boils down to these few lines of code:
var myEl = angular.element( document.querySelector( '#copyButton' ) );
myEl.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show');
myEl.attr('title',"Copied");
myEl.on('hidden.bs.tooltip', function () {
// do something…
myEl.attr('title', $scope.copyButtonToolTip)
.tooltip('fixTitle');
});
Also, you should be using bootstrap version 3 instead of v4.
Updated Plunkr
Related
I have tried to add a rich text editor to my application. I'm using nicEdit.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(new nicEditor().panelInstance(document.getElementById('single_answer_description')));
});
I added this part to convert my normal textarea to a richtext editor. It looks fine:
What I want to do now is to only show some of the icons like B, I, U. I don't want all the icons. How can I hide those? I also want to set font family by default inside the rich text editor content.
I tried to search so many links but I couldn't get any proper solution for this issue. Please help me to get out of this issue. Thanks in advance.
As per the documentation
You can add an array of the buttons you want when you instantiate the object.
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor({buttonList:['bold','italic']}).panelInstance(document.getElementById('single_answer_description')));
});
Trying to accomplish the above result with jquery.googleSuggest.js is giving me a lot of trouble as can be seen here. Some of the original CSS of jquery UI seems to be shining tough. Anyone any hints on the most elegant way to fix this? (And how to add the grey "gle", after "goo" behavior in the screenshot above?)
HTML
<div class="suggestions_box">
<ul>
<li>f<b>acebook</b></li>
<li>f<b>unda</b></li>
</ul>
</div>
JS
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div);
input.googleSuggest({ service: "web" });
Your custom css in the linked fiddle is creating problems. Removing all the css and adding external jquery-ui.css makes the dropdown appear correctly (as seen in this fork of your fiddle).
Basically, you only need:
// html placeholder for the input
<div id="inputs"></div>
and
// js init code
var input = $("<input>").appendTo($("#inputs"));
input.googleSuggest({ service: "web" });
Also, your other question has already been answered in this thread: How to implement a google suggest-like input field? It's a neat trick accomplished by overlaying two input fields one above the other one, with the lower one disabled and set to the value of first suggested entry.
I have read the following blog http://www.d3noob.org/2013/08/add-line-chart-in-dcjs.html
and now understand how to add a tooltip under the data. My question is if its possible to add custom html code as a tooltip? Say something like the bellow, and make it percieve it as HTML code instead of as a string as it currently does.
.title(function (d) {
return "<table><tr><td>Testtext</td></tr><tr><td>Testtext</td><tr></table>";
})
Thanks in advance.
As per my understanding we cannot do this directly using title of dc.js, as they are using text property of jQuery and text does not work on HTML. Refer code
if (_chart.renderTitle())
enter.append("title").text(dc.pluck('data',_chart.title(d.name)));
You can do this by using d3.tip and refer a live example here demonstrating use of HTML in tip.
So what i want to do is add a description to the lightbox gallery.
I am using jquery plugin blueimp image gallery and also the bootstrap image gallery plugin over the top. I've searched everywhere but there were only a few posts about it other than what is mentioned within the instructions of the documentation, so figured i'd ask.
i'm sure that's probably whats causing the problem but first i'd like to know if there is a way to add a description preferably underneath the image, it can be under the title too though.
this is the furthest i have got with it using the code below from the blueimp documentation and an additional extra i found from another user demonstrated in the jsfiddle.
blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/37/
this shows how it looks on my webpage, i did manage to implement this but you will however notice that it only works for the first image.
Surely this can be amended with some js? I'm pretty new to js i can read and amend basic js but i'm guessing the same way they change the title can be used to change the description?
Thanks for all the help guys!
In case you still need this:
$('#blueimp-gallery').on('slide', function (event, index, slide) {
$(this).children('.description')
.text($('#links a').eq(index).data('description'));
});
I have passed a CSS filepath to my CKEditor instance with the contentsCss option, which works great. However, I need to be able dynamically add more styles that I can't add in the CSS file. In version 3 it looks like one could use the addCss function (see this forum post). Unfortunately, this doesn't seem to work in version 4 (see this forum post). Does anyone have an alternative? I am using the jQuery adapter, so a solution using either API would work.
I think you can do something like
$(window).on('print',function(e){
e.preventDefault();
var styles = '<style>'+/*calculation of styles*/+'</style>'
$('head').append(styles);
window.print();
});
or
$(window).on('load',function(e){
var styles = '<style>'+/*calculation of media query print styles*/+'</style>'
$('head').append(styles);
});