There is probably an easy answer here but I am trying to put both text and a font awesome icon in the header of a datatable I am trying to update (should go after the the title - 1st line of code). So far I am just getting a blank or a square. Here's a block of code from the map. Anyone have any ideas? Does this have to be done in the CSS instead? Thanks
{title:'enabled' + '<i class="fa fa check green"></i>', class:'enabled small-screen small-screen-2-col', data:function(row, type, val, meta) {
var isEnabled = row.enabled || 0;
if (type=='display') {
return (isEnabled) ? '<i class="fa fa-check green"></i>' : '' ;
}
return isEnabled;
},
The first classname is wrong. It should be <i class="fa fa-check green"> instead of <i class="fa fa check green></i>. You forgot the dash between fa and check
Related
I'm trying to create a function in JavaScript, which on the button click changes class and adds a green checkmark, which is the icon tag in html.
I tried this:
function markerValg(btnID) {
knap = document.getElementById(btnID);
knap.classList.remove("unselected");
knap.classList.add("selected");
document.getElementById(btnID).innerHTML = += <i class="fa fa-check ikon"></i>
Change the last line of code to
document.getElementById('test').innerHTML = '<i class="fa fa-check ikon"></i>';
<button id='test'>Check</button>
How am I suppose to put fontawesome icon i.e
`<i class="fa fa-info" aria-hidden="true"></i>
`in a place of "Info" in below inner.html
Below is my javascript
dlg.innerHTML = "<span class='alert-headingg'>Info<" + "/span>";
Try this You have to just put your icon element inside your span.It will work for you.
dlg.innerHTML = "<span class='alert-headingg'><i class="fa fa-info" aria-hidden="true"></i></span>";
<i class="icon-github"></i>
div.github:before
{
content: "\f09b";
font-family: FontAwesome;
}
Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?
Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".
Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML
You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>
I have the following piece of code:
<ul class="ul" id="selected_conditions">
<li data-field="asset_locations_name" data-condition="in">
<i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
<span class="condition_item" data-id="1213381233">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
</span>,
<span class="condition_item" data-id="1212371897">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
</span> )
</li>
</ul>
Each time I click on the little icon .delete I should remove the current value and I was able to achieve that with the following code:
$(function() {
$('#selected_conditions').on('click', '.delete', function(ev) {
var item_id = $(this).parent().data('id');
$('.condition_item[data-id="'+ item_id +'"]').remove();
});
});
But the code above has two problems: if I remove any item the symbol , isn't removed and that's wrong as an a second one I can't have an emtpy () string, so:
How do I remove the , so I not end up with a bad string like (,1213381233) or (1213381233,)?
Any help? I have leave you a Fiddle to play with. This is a WIP so if you have a suggestion or better solution feel free to add it to your answer.
Instead of hard-coding the comma(s), I'd use CSS :before to add commas only when there's more than one item in a row.
.condition_item+.condition_item:before {
content: ", "
}
https://jsfiddle.net/8184ok2e/2/
I have a button:
Now I have a method on that button:
function showPreview(event) {
var button = event.target;
$(button).empty().html('<i class="fa fa-spinner fa-pulse"></i>');
$.post(
...,
function (data) {
...
$(button).empty().html('<i class="fa fa-fw fa-file-pdf-o"></i> Preview');
}
);
}
Sometimes (rarely) when I click the button in Chrome, it ends up looking like this:
But when I check in the page inspector in Chrome, it reveals that there's only 1 icon and 1 "Preview" string in the button.
I've tested this with other browsers, and none share a similar bug.
Browsers I've tested this with:
Internet Explorer 11
Firefox
Opera
Safari
I have concluded this to be a Chrome bug, and this is unacceptable behaviour. As you can see I'm already trying to empty the button before adding new content to no avail. Is there any other workaround for this specific problem?
Here's my JSFiddle: https://jsfiddle.net/spe0asbo/2/
Please take note that this only happens rarely. It might not happen at all to you.
Give the button an ID and replace event.target with the button element itself.
HTML:
<button id='btn01' type="button" onclick="javascript:showPreview(event);">
<i class="fa fa-fw fa-file-o"></i> Preview
</button>
JS:
function showPreview(event) {
var button = $('#btn01');
$(button).attr("disabled", "disabled");
$(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>');
setTimeout(function() {
$(button).html('<i class="fa fa-fw fa-file-o"></i> Preview');
$(button).removeAttr("disabled");
}, 2000);
}
See the JSFiddle link here : https://jsfiddle.net/4h5pehr9/
It only happened when I double-clicked the button.
Check my changes: https://jsfiddle.net/ag0ztLna/3/
function showPreview(event) {
var button = event.target;
$(button).attr("disabled", "disabled");
$(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>');
setTimeout(function() {
$(button).html('<i class="fa fa-fw fa-file-o"></i> Preview');
$(button).removeAttr("disabled");
}, 2000);
}