I installed the js bootstrap iconpicker (http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html, http://victor-valencia.github.io/bootstrap-iconpicker/) but I do not see how to detect the selected icon.
The example code to configure the button is:
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
But there's nothing in the examples telling how to get the selected icon. I'ld think of a callback or something like that.
How can I get the selected icon?
I've updated the plugin at Github, so a change event is fired when the user change the iconpicker.
I've already sent a pull request to the owner of the plugin (Victor Valencia).
While he doesn't approve the changes you can use the version modified by me.
How you use it:
$('#iconpicker').on('change', function(e) {
console.log( e.icon );
});
Log:
fa-key
fa-info-circle
fa-flag-checkered
Edit:
Victor Valencia already approved my pull request so you can download the source from his repository.
Theres a hidden input that changes based on what you select - you can access it with this: $('input[name=icon]')
As fas as mi knowledge, It just change the css of the component. You will not get the image value here or the path.
Can you please elaborate what you trying to achieve here.
the event is "iconpickerSelected"
$('#convert').iconpicker({
iconset: 'fontawesome',
icon: 'fa-key',
rows: 5,
cols: 5,
placement: 'top',
});
$('#convert').on('iconpickerSelected', function (e) {
//here you can get the value
$(this).val()
})
Related
I use the following code to authenticate a user on my website:
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
window.onload = function() {
google.accounts.id.initialize({
client_id: "XXXXXXX.apps.googleusercontent.com",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" }
);
<div id="buttonDiv"></div>
But I need to customize the button with the design of my site...
Is it possible to create my own button like this ?
<button type="button" onclick="googleLogin();">Connection with Google</button>
And with the onlick I can connect. I tested several variants but it does'nt work, the initialization does'nt happen...
how i can customize the button keeping the current code (or just modifying it a bit) ?
Do you have an idea ?
Okay, probably there is no other way to modify the button style other than using renderButton options or just simply CSS.
But there is another option, there is a 'second' API. Afaik, that JS API is considered outdated and Google wants you to use the second one.
So it's here about integrating it into an app, and here about customizing the button itself.
I have been using ng2-smart-table plugin for the table grid. There is an Add new button to add entry into the table.
But I just want to trigger the 'Add new' event from an external button (May be top of the table but not within the table). There is a feature already available in the ng2-smart-table which is completely reverse to my requirement. That can be achieved by using 'mode:external'.
Currently this is open with their Github page as an issue.
If they don't have an option with Ng2-smart-table, is there anyway to bind an event to other buttons(External) in Angular 6? If so, how can I do it?
You can trigger the ng2-smart-table's create event via DOM object event.
Let's say my ng2-smart-table's add button settings
add: {
addButtonContent : '<span class="add"><i class=""></i></span>',
createButtonContent:'<i class="far fa-save"></i>',
cancelButtonContent: '<i class="fas fa-times"></i>',
confirmCreate: true,
}
then on click of your external button trigger the click of 'add' button in the ng2-smart-table like
onAdd(event) {
$(".add").click();
}
You need to use LocalDataSource or ServerDataSource.
I had the same question, and after trying some examples, I saw the good one here.
In this part of the code they use the data source method load(data) with source(LocalDataSource):
constructor(protected service: BasicExampleLoadService) {
this.source = new LocalDataSource();
this.service.getData().then((data) => {
this.source.load(data);
});
}
Then i try with my code and did the same with LocalDataSource, but to add a row into the table I did this:
this.source.add({
name: 'name',
description: 'desc',
numQuestions: '8',
});
this.source.refresh();
And it work for me.
I hope it helps.
try it:
on your html:
<button (click)="addRecord()">Add</button>
<ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>
on your component:
#ViewChild('smartTable') smartTable;
.
.
.
addRecord() {
this.smartTable.grid.createFormShown = true;
this.smartTable.grid.getNewRow();
}
I want to put a listener on 'onDeselectAll' event, but 'onDeselectAll' - does not exist in the latest version of the Bootstrap multiselect plugin.
I want something like that
$('.multiselect').multiselect({
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
includeSelectAllDivider: true,
maxHeight: 400,
onSelectAll: function () {
console.log("select-all-nonreq");
},
onDeselectAll: function () {
console.log("deselect-all-nonreq");
}
});
What is the best way to do that?
What is the best fork solving this issue? I found this fork not quite the same as 'onDeselectAll' but close. Is there anything better?
I red somewhere that this option existed in older versions, why did they remove it?
I've found the developers made an issue about it. Does it mean they are planning to fix it? When?
I was checking if Select2 can do 'select all' is it possible?
What should I do? Wait, to go older version or use another fork use another plugin?
This is a desired result.
Your code is correct, these events already exist: http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-onSelectAll
But... There is a bug. I created a fork on this project to fix this bug... I've already made a pull request that is waiting for merge.
Pull request: https://github.com/davidstutz/bootstrap-multiselect/pull/764/files
My Fork: https://github.com/lmcarreiro/bootstrap-multiselect
I added an onchange function to the HTML which counts how many options are selected and it is working:
<select id="yourID" class="custom-select" onchange="unselectAll();" multiple>
This is the function to verify that nothing is selected:
function unselectAll(){
if($('#yourID :selected').length==0){
//Do what you need here
}
}
Yup this was a bug I encountered as well hence you can consider going for something like this
$(document).on('change','.multiselect',function(){
var labels = [];
var brands = $('#field option:selected');
$(brands).each(function(index, brand){
labels.push($(this).text());
});
var values = $("#field").val();
if(values.length > 0){
console.log(labels);
console.log(values)
}
})
I want to show a popup many on click. I want that many to be in a bubble. So I created a demo: here. But that Bubble generator plugin i use tends to keep tons of trash in the DOM each time it shows a popup. Well so I tried to destroy trash via
$('.grumble-text').remove();
$('.grumble').remove();
$('.grumble-button').remove();
But it somehow brakes it at all=( So how to change grumble-bubble popup plugin code to make it either keep DOM clean or at least make plugin independent of trash it creates?
I've recently updated the plugin to provide better control of positioning and angle. The update also persists the grumble, invoking the plugin more than once on an element will not create extra left over DOM.
Try updating to the latest code. The code below should now work as you expect.
var html = ''
+'Download me'
+'<br/>'
+'Edit me'
+'<br/>'
+'Delete me';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
$grumble.grumble({
text: html ,
angle: (Math.random() * 360 + 150),
distance: 30,
hideOnClick: true,
onShow: function() {
$grumble.addClass("hilight");
},
onBeginHide: function() {
$grumble.removeClass("hilight");
}
});
}).mousedown(function() {
$grumble.addClass("hilight");
});
Thanks for your interest. If there are any further problems please raise them as bugs on the github page. https://github.com/jamescryer/grumble.js
Use the grumble and button parameters on the onHide callback like this:
$('#grumble').grumble({
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
onHide: function(grumble, button) {
grumble.bubble.remove();
grumble.text.remove();
button && button.remove();
}
});
This allows you to remove only the "trash" (I prefer "leftovers") associated with that specific tooltip/popup/bubble. Note that button only exists if hasHideButton is true, hence the button && existence check.
Why do you want to remove it? Is the 'trash' causing problems with browser performance?
In general, the only way to do this is to dig into the plugin source and add a function to remove the plugin, if one is not already present. If you just remove the related DOM elements you will leave behind references to them and events handlers that access them.
I'm trying to figure out how to customize the Pagination Plugin's Navigation; the First, Prev, Page 1, Page 2, Next, Last. I want to make it 'Prev, Next, Page 1 of 2'
http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
The documentation states I can hide 'First/Last' by declaring show_first_last as false -
However, this didn't work.
UPDATE: Here's a link with the full code, and struggle. http://tinyurl.com/buab7ah
OK so it doesn't support it out of the box and I had to modify it a little. Here's the link:
http://dl.dropbox.com/u/24657596/Pajinate/jquery.pajinate.js
So how does it work? Simple - specify the order via a string array, like so:
$(document).ready(function(){
$('#paging_container1').pajinate({
nav_order : ["prev", "next", "num"]
});
});
Or like so:
$(document).ready(function(){
$('#paging_container1').pajinate({
nav_order : ["prev", "next", "num", "first", "last"]
});
});