I have written the following code for toggling a dash with a check, the desired toggling is not happening:
function myFunction(x) {
x.classList.toggle("fa-check");
}
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i onclick="myFunction(this)" class="fa fa-minus"></i>
Also surprisingly, if I replace fa-minus with fa-check and vice-versa, the code seems to work!
Could anybody suggest a solution to this? As I need the first method to be working.
You need to toggle the fa-minus at the same time also. As actually you are having both of them when you add the fa-check so one is overidding the other.
You can also rely on Font Awesome classes to increase size:
function myFunction(x) {
x.classList.toggle("fa-check");
x.classList.toggle("fa-minus");
}
.fa {
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i onclick="myFunction(this)" class="fa fa-5x fa-minus"></i>
Actually, it is working but fa-check is append to the already exist classList so when you add fa-check classList become fa fa-minus fa-check and fa-minus take the priority show you can not able see effect of fa-check. Just toggle fa-minus as well and you will see output. Try below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
</style>
</head>
<body>
<i onclick="myFunction(this)" class="fa fa-minus"></i>
<script>
function myFunction(x) {
x.classList.toggle("fa-check");
x.classList.toggle("fa-minus");
}
</script>
</body>
</html>
Do not use inline event handlers like onclick, instead attach an event listener programmatically. Also you need to toggle .fa-minus as well, otherwise you get an element that looks like
<i class="fa fa-minus fa-check"></i>
in which case whatever class is defined later in FA's css wins.
document.querySelector('.fa.fa-minus').addEventListener('click', function(e) {
e.target.classList.toggle("fa-check");
e.target.classList.toggle("fa-minus");
})
#import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
<i class="fa fa-minus"></i>
Related
I want to make like and dislike button with javascript. I'm trying to make toggle function, when clicked the button thumbs up color become dark blue, if clicked thumbs down become dark red. But it seems not working, the color is not fixed. And also I want to count the like, the user only get 1 chance vote, like or dislike.
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa-thumbs-up:hover{
color:darkblue;
}
.fa-up{
color:darkblue;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:hover{
color:darkred;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button name="button1" type="button1" style="font-size:10px">0   | <i onclick ="myFunction()" id = "btn" class="fa fa-thumbs-up"></i></button>
<button name="button2" type="button2" style="font-size:10px">0   | <i onclick ="myFunction2()" class="fa fa-thumbs-down"></i></button>
<script>
var btn = document.getElemetById('btn');
function myFunction(){
if(btn.classList.contains("fa")){
btn.classList.remove("fa");
btn.classList.add("fa-up");
}else{
btn.classList.remove("fa-up");
btn.classList.add("fa");
}
}
</script>
</body> </html>
All help is appreciated. Thank you very much.
Updated your code to work like you want:
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button i{
transition: .3s all ease;
}
.btn_up.clicked,.btn_up:hover i{
color: darkblue;
}
.btn_down.clicked,.btn_down:hover i{
color: darkred;
}
.fa-thumbs-up:before{
display: flex;
margin-left: 4px;
margin-bottom: 3px;
}
.fa-thumbs-down:before {
display: flex;
margin-left: 4px;
}
</style>
<button class="btn_up" onclick ="myFunction(this)" name="button1" type="button1" style="font-size:10px">0   | <i class="fa fa-thumbs-up"></i></button>
<button class="btn_down" onclick ="myFunction(this)" name="button2" type="button2" style="font-size:10px">0   | <i class="fa fa-thumbs-down"></i></button>
<script>
var btn_up = document.querySelector('.btn_up');
var btn_down = document.querySelector('.btn_down');
function myFunction(elem){
elem.classList.toggle('clicked');
if(elem === btn_up){
btn_down.classList.remove('clicked');
}else{
btn_up.classList.remove('clicked');
}
}
</script>
</body> </html>
I'm. I just began learning HTML and CSS. My question is: How do I make the buttons above change color once they're clicked:
<div class="icon-bar">
<i class="fa fa-search" onclick="myFunction()"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
</div>
I've tried adding an onclick event, but it didn't work.
This is the function:
<script>
function myFunction() {
document.getElementById("fa fa-search").style.color = "red";
}
</script>
The full code:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0}
.icon-bar {
margin-top: 20%;
margin-left: 0.2%;
width: 90px;
background-color: rgba(85, 85, 85, 0.85);;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: rgba(0, 140, 255, 0.5);
}
.active {
background-color: rgba(0, 140, 255, 1);
}
</style>
<body>
<div class="icon-bar">
<i class="fa fa-search" onclick="myFunction()"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
</div>
<script>
function myFunction() {
document.getElementById("fa fa-search").style.color = "red";
}
</script>
</body>
</html>
Don't use inline JavaScript on*="" handlers, same as you hopefully don't use inline style="" attributes. JavaScript should be in one place only and that's your script tag or file.
Use Element.addEventListener()
Use .querySelectorAll() to get your desired elements
Use NodeList.prototype.forEach() to loop your elements
Use Element.classList with the API methods .add() .remove() etc.
Use higher specificity in your CSS by doing .icon-bar a.active to override the :hover styles.
const ELS_barItems = document.querySelectorAll(".icon-bar a");
function makeActive(ev) {
ev.preventDefault(); // prevent browser action on Anchors
ELS_barItems.forEach(el => el.classList.remove("active"));
ev.currentTarget.classList.add("active");
}
ELS_barItems.forEach(el => el.addEventListener("click", makeActive));
body {margin:0}
.icon-bar {
margin-top: 20%;
margin-left: 0.2%;
width: 90px;
background-color: rgba(85, 85, 85, 0.85);;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: rgba(0, 140, 255, 0.5);
}
.icon-bar a.active {
background-color: rgba(0, 140, 255, 1);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<i class="fa fa-search"></i>
<i class="fa fa-envelope"></i>
<i class="fa fa-globe"></i>
</div>
You can just pass the element reference to your function:
<button onclick="turnRed(this)">click</button>
and your Javascript:
turnRed = function(e){
e.style.background = 'red'
}
As for your code, the problem is that you are calling getElementById("fa fa-search") but you're passing a class instead. You could change to getElementsByClassName but remember that every element with that class would change as well.
I'm trying to create this sidebar menu to the right using HTML CSS transitions and standard JavaScript and I also imported some FontAwesome icons.
My code looks like this (the JavaScript code is inside the HTML document):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<script src="https://kit.fontawesome.com/b1956a1c85.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-user"></i></li>
<li><i class="fas fa-cogs"></i></li>
<li><i class="fas fa-wrench"></i></li>
<li><i class="fas fa-tools"></i></li>
<li><i class="fas fa-lock"></i></li>
</ul>
</div>
<i class="fas fa-bars"></i>
<script>
let btn = document.querySelector('.button'),
side = document.querySelector('.sidebar');
btn.addEventListener('click', function() {
if(btn.innerHTML === '<i class="fas fa-bars"></i>') {
btn.innerHTML = '<i class="fas fa-times"></i>';
side.style.marginLeft = '0px';
} else if (btn.innerHTML === '<i class = "fas fa-times"></i>') {
btn.innerHTML = '<i class= "fas fa-bars"></i>';
side.style.marginLeft = '-25px';
}
});
</script>
</body>
</html>
And my CSS page looks like this:
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #af8f36;
}
.sidebar {
float: left;
width: 120px;
height: 100vh;
background: #6e36af;
overflow: hidden;
margin-left: -125px;
transition: 0.5s;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li a {
text-decoration: none;
color: #fff;
height: 100px;
width: 100%;
font-size: 40px;
line-height: 100px;
display: block;
text-align: center;
transition: 0.5s;
}
.sidebar ul li a:hover {
background: #5d2e94;
}
.button {
float: left;
padding: 27px 20px;
font-size: 40px;
text-decoration: none;
color: #333;
}
For some reason the sidebar won't slide to the right when I click on the hamburger button. Can someone explain to me why? Is my JavaScript code correct?
I found your problem:
In your JS code you check if the inner HTML of the Button is:
<i class="fas fa-bars"></I>
But Fontawesome adds a new Attribute to your <I> Element. So now it's inner HTML is:
<i class="fas fa-bars" aria-hidden="true"></I>
I would recommend using a variable in js or something similar to check/save wether your menu is open or not.
Your way could easy lead to more bugs.
In Addition, for better performance I would recommend animating with Transform not margin, if possible.
I have a plus font Awesome icon i want to change it into minus when user clicks on plus and vice versa
I am using it in my HTML table to expand some rows
$('i').click(function() {
$(this).find('i').toggleClass('fas fa-plus fas fa-minus');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
You're almost there, but your selector is incorrect (you can just use $(this) inside of an event handler to reference the clicked element):
$('i').click(function() {
$(this).toggleClass('fa-plus fa-minus');
var color = ($(this).hasClass('fa-minus')) ? 'red' : 'green';
$(this).css('color', color);
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
No need to use find $this represent i, and toggle multi pal class to change class and shape like below.
$('i').click(function() {
$(this).toggleClass('fa-plus green fa-minus red');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
.green{
color: green;
}
.red{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
You have to remove find() and it will be work.
$('i').click(function() {
$(this).toggleClass('fa-plus fa-minus');
$(this).hasClass('fa-minus')? $(this).css('color','red'): $(this).css('color','green');
});
.icon {
color: green;
cursor: pointer;
margin-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>
Here is my code:
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
line-height: 3;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
As you see, none of padding or margin or line-height don't make my expected effect. Here is expected result:
How can I get that?
Note: Based on my real codes, I shouldn't use position: absolute; for that <i> element.
The margin/padding/line-height is working, you just have to add vertical-align:top to span
span{
vertical-align:top;
}
.fa-caret-down{
margin-top: 3px;
padding-top:3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>
Here is the changes which works
.fa-caret-down{
top: 6px;
position : relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><span>something</span> <i class="fa fa-caret-down" aria-hidden="true"></i></div>