I'm working with a data base that tells me if the user is a male (displays the "M" letter) or if is a woman (displays the "F" letter). I wanted to display the venus/mars icon depending on the gender instead of the letter itself (if is "M" the mars icon appears, if is "F" the venus icon appears). How can I do this?
Here is how I get the value from the data base :
<div class="gender" data-bind="text:Sex"></div>
PS: I am working with font awesome icons.
I tried assigning the font awesome icons but I'm not doing it right.
You can achieve this by using JS DOM. Just add class M or F it will automatic add fontawesome icon
<div class="gender m" data-bind="text:Sex"></div>
<script>
if (document.querySelector(".gender.M")) {
document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-mars"></i>`;
}
else {
document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-venus"></i>`;
}
</script>
Related
When debug a webpage, a icon show on page but do not find the class definition! for example, below code use a class "icon icon-md ion-md-power", which libray should include to use this icon. any tutorial is welcome since I am a newbie for web programming!
<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
ionicons not use CSS to display icon. ionicon have svg icons and get svg content by JavaScript based on ion-icon's attributes. You can learn about the Shadow DOM technology that ionicon uses to display icons in an MDN article.
icon.tsx, utils.ts#getUrl()
loadIcon() {
if (Build.isBrowser && this.isVisible) {
const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
if (url) {
if (ioniconContent.has(url)) {
this.svgContent = ioniconContent.get(url);
} else {
getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
}
}
}
I'm trying to understand how to access the phone number here:
<div class="address__location">
<p>
Siddals Road
<br> Derby DE1 2QD
</p>
<p>Main Phone:
0800123123
</p>
</div>
I need to find the html element of the phone number so I can replace it with another number.
So if I were to use getElementbyID"xxx" it would return the phone number.
There is no id attribute set on that element.
You could use another selector, though, by using document.querySelector and passing a[href^="tel:"]. This will search for a elements that have an href attribute that starts-with (that is what ^= means) the text tel:.
so
var telephoneNode = document.querySelector('a[href^="tel:"]');
telephoneNode.textContent = 'some other phone'; // change the displayed text
telephoneNode.href = 'some other url'; // change the href and in effect where the link points to
I can set the icons for the Bootgrid command buttons using Fontawesome icons, but can't make a fontawesome icon display in a Bootgrid table cell.
<td><i class='fa fa-check'></i></td>
I've checked it works outside the Bootgrid table.
Even styling does not work:
<td><span style="color:#ff0000!important">x</span></td>
I'm doing this at the moment and it works:
In the 'formatters' return an html string containing an element with a font awesome class.
"clipboard": function(column, row) {
htmlstring = "<i class=\"fa fa-clipboard\" aria-hidden=\"true\" alt=\"Copy to clipboard\"></i>"
return htmlstring
}
Hope that helps.
Rob Ganly
I have a text box which I would like to include a £ sign whenever the user begins to type in a number.
For example: £32
How would I do this:
#Html.TextBox("amountFrom", "", new { #class = "form-control", #placeholder = "£" })
At the moment I just have a placeholder which puts a '£' sign in until the user types in an number. I would like the sign to appear immediately after the user starts typing.
A quick and dirty fix would be to use JavaScript or jQuery. When the text box changes, a £ is added to the front of whatever is already in the text box.
#Html.TextBox("amountFrom", "", new { #class = "form-control", #id="price" })
<script>
$(function() {
$('#price').on('input',function() {
var price = $('#price').val();
if (price.substring(0, 1) == '£')
{
price = price.substring(2);
}
$('#price').val('£ ' + price);
});
});
</script>
See this fiddle here : http://jsfiddle.net/49gdh95z/
A slightly better solution might be to use CSS that shows a background image of a pound sign, like StackOverflow uses to show a magnifying glass image on it's search box.
A fiddle for this example can be found here : http://jsfiddle.net/7pjm9v66/
Note that this second example adds the pound sign immediately after something is typed into the input box (and doesn't display beforehand). If you wanted to have the pound sign always display, then you can of course omit the JavaScript and move the CSS it applies directly to the #price element in the CSS.
I'd like to have a specific image display, and allow users to click on it and the image changes, kind of like a mouseover effect. However, I want it to show a random image from a set list. It'd happen once per page refresh, and be done. I'd prefer it not be reversible.
What I'm using it for is a random card draw with images. I start with the back of the card, and have many possibilities to show up when clicked.
Thanks!
Here is the basic code you would need as far as I understand
<img src="img/BackOfCard.jpg" onClick="Randomize(this)" />
<input type="hidden" value="1" id="onlyOnce">
<script type="text/javascript" language="javascript">
function Randomize(obj) {
onlyOnce = document.getElementById("onlyOnce");
if (onlyOnce.value=="1") {
var n = Math.round((100*Math.random())+0.5);
var urls = ["url1.png","url2.png","and so on"];
obj.src = urls[n];
onlyOnce.value="0";
}
}
</script>
This assumes that you have a folder called "img" with the back of card image and all the card faces stored there. The card faces will be stored in the format Ace = 1.jpg, 2 = 2.jpg, 3 = 3.jpg, King = 13.jpg and so on.