Fill color in icons - javascript

i am new to css and jquery. I want to fill the color in icon. For example , Like instagram's heart icon (when double tapped it is filled with red color).
I am using font awesome for the same. so i am able to get the heart icon but i can not fill the color the way i want. I tried to change background-color property but it does not work either.
The thing is, when user clicks on the heart icon, it should be filled with the red color. Can you guide me please?
My html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>
all.js file is the file i downloaded for icons.
What should i use instead of font awesome, if this does not work out?

Why would you reinvent the weel? You don't need to manage this with your own styles.
In fact FontAwesome gives you different classes for each icon, for example for the fa-heart icon you can use fa-heart for a filled heart and fa-heart-o for an empty one.
So just use a jQuery code that toggles these two classes on click event of your icon:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
Demo:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-heart" id="heart"></i>

You can add a css class to the element to style it's appearance. In my example I added click listener to the element and just toggled CSS clas.
JS code:
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
Example Link:
https://codepen.io/bojandevic/pen/mxKZqK

You need add onlick function in the icon, and create a function to change te color of this.
<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>
And your js should be like:
function changeColor()
{
var icon = document.getElementById('heart');
icon.style.color = "red";
}

Using jquery toggleClass you can add or remove classes from each element in the elements like this.
$("#heart").on("click", function() {
$(this).toggleClass('oldColor', 'newColor');
});
.newColor {
color: red;
}
.oldColor {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart oldColor" id="heart">Heart</i> </div>
</body>
</html>

you can use onclick attribute like this:
<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>
and in your script area or file define a function like this:
function changeColor() {
document.getElementById("heart").style.color = "red"; }

Related

Convert text to InnerHTML Value of a Button onClick on <input> tag

I want to change the Button' value with a font awesome spinning animation icon on click.
HTML:
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input id="button_g" type="button" class="button-default" value="Go" onclick="abc(this);">
Script:
function abc(this1)
{
//alert('asdasd');
this1.disabled=true;
this1.value ='<i class="fa fa-spinner fa-spin"></i>';
}
This one only replaces the Button's value with a non-working html code. I tried it with:
document.getElementById('button_g').innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
But doesn't work. Please advise.
Instead of input you should use button and set innerHTML of button
function abc(this1) {
this1.disabled = true;
this1.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
}
button {
padding: .25rem .75rem;
border: 1px solid #3d3a37;
border-radius: 6px
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="button_g" class="button-default" onclick="abc(this);"> Go </button>
The value attribute has a different meaning for each type of the input tag. Yours is a button and so the value attribute is linked to the text inside the button, not the inner html of it.
If you want to change the inner html, use this1.innerHtml
For more read here

How to toggle class for font awesome icons with pure javascript?

I am trying to learn javascript and trying to toggle between the empty circle icon and the circle with check mark when the icon is clicked. However, it does not seem to be working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<head>
</head>
<body>
<i class="far fa-circle" id="toggle"></i>
<script>
document.addEventListener('click', (event) =>{
if(event.target.id == 'toggle'){
document.getElementById('toggle').classList.toggle("fas fa-check-circle");
}
});
</script>
</body>
</html>
Sometimes it's more helpful to define your element default CSS and than use a is-* class modifier - than doing funky stuff with fas classes. Take a look:
const EL_tog = document.querySelector('#toggle');
EL_tog.addEventListener('click', () => {
EL_tog.classList.toggle("is-active");
});
#toggle:before {
font-family: "Font Awesome 5 Free";
content: "\f111";
font-style: normal;
}
#toggle.is-active:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<i id="toggle"></i>
Tomorrow, even if you decide to use another icons-set, you don't need to change the HTML, just your CSS. Which is after all - all what's about.
If you wonder where I got that hex values for CSS content: like \f111 - not a big deal
An idea is to use the stacking icons and you can deal with only one class:
var icon = document.getElementById('toggle');
icon.addEventListener('click', (event) => {
icon.querySelector(':last-child').classList.toggle("fa-check-circle");
});
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<span class="fa-stack fa-2x" id="toggle">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version -->
</span>
Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
We can solve this using vanilla JavaScript.
Just add an onclick listener to the toggle element. Then replace the class fa-circle with fa-check-circle.
const circle = 'fa-circle'
const check = 'fa-check-circle'
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle(circle)
toggler.classList.toggle(check)
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>
Another way is using css just define a new class (i.e. active) with the pseudo attribute before like this:
#toggle.active::before {
content: '\f058';
}
Now, we add an onclick event to the toggle element to add or remove the active class:
toggle.onclick = () => {
toggler.classList.toggle('active')
}
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
toggler.classList.toggle('active')
}
#toggle.active::before {
content: '\f058';
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

Changing the color of the elements in the navigation bar when visited

I have the following navigation bar for my Website:
The whole Code is here in plnkr
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="scrollmenu w3-bar w3-border w3-card-4" id="myHeader">
<a style="float:left" href="index.html" class="w3-bar-item w3-mobile w3-
border-right">Menu</a>
<a href="animationbasics1.html" class="w3-bar-item w3-mobile w3-border-
right">Animation Basics1</a>
<a href="animationbasics2.html" class="w3-bar-item w3-mobile w3-border-
right">Animation Basics2</a>
<a href="animationbasics3.html" class="w3-bar-item w3-mobile w3-border-
right">Animation Basics3</a>
</div>
</body>
</html>
I wrote this active function but it is not working in plnkr, so that the color of the active element would change to red, so the user knows where he is.
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
curpage = $(this).attr("title");
}
});
My Problem is, I want know to write a function, to change the color of an already visited element to light blue or something else, so the user knows that he already visited this page.
I am thankful for every suggestion or solution!
Cheers!
As suggested by others, the :visited pseudo class does the job.
a:visited {
color:red;
}
I have also added the :hover(blue) and .active(green) states.
Here's a working example.
Note: it won't work in incognito mode.
Why doing this in jQuery ?
Could you use css ? like :
a:visited{
color: red;
}

Can't change attribute data-*** with jquery

I don't understand why the request for button does not performed. I must to change the direction for mobile screens, but until it's now work.
$( "button.btn-tooltip" ).attr( "data-placement", "left" );
body {
padding: 10px;
}
button {
width: 100px;
height: 30px; margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"></button>
You're probably looking at the default tooltip, rather than Bootstrap's tooltip. The regular toolbar defaults to the bottom-right, which could be giving you confusion with the data-placement of right:
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
To use Bootstrap tooltips, you need to remember to initialise them with:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Adding this code shows that your data-placement change does indeed work as expected:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
If your code is not giving you the same result, then your JavaScript may be running before the DOM has fully loaded (meaning that the button wouldn't exist for it to be manipulated).
In this case, ensure that your code is wrapped inside a $(document).ready(function(){}) to force the JavaScript to wait until the button has been created.
Hope this helps! :)
you can just do
$("button.btn-tooltip").data( "placement", "left" );
Your code as written works properly, as seen here:
http://jsbin.com/xozuseyeyi/edit?html,js,output
My suspicion is that your javascript code is running before your button is available in the DOM.
Have you tried wrapping your code inside a document.ready() handler or similar?
$(document).ready(function() {
$("button.btn-tooltip").data( "placement", "left" );
});
I think the attribute is added indeed, but because you add the attribute after the bootstrap have initialized, so it does not work.
Do you use the tooltip in bootstrap? you can try to set the attribute before call
$('button.btn-tooltip').tooltip()

Displaying text when link is clicked

This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>

Categories

Resources