How to toggle font awesome icon via class (pure CSS) - javascript

I'm working on a small project which is going to have a light/dark mode toggle but I'm struggling to toggle the class on the tag.
So I'm using font awesome for the icons here is my code:
HTML:
<i class="fas fa-moon" id="toggle"></i>
JS:
function classToggle() {
document.getElementById("toggle").classList.toggle('fas fa-moon');
document.getElementById("toggle").classList.toggle('fas fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
the above code gave me the error:
InvalidCharacterError: The string contains invalid characters.
for the JS I have also tried:
function classToggle() {
this.classList.toggle('fas fa-moon');
this.classList.toggle('fas fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
but this doesn't work either and gave me the error:
TypeError: undefined is not an object (evaluating 'this.classList.toggle')
I got the code above from https://codepen.io/jacknifey/pen/XWJaKZr and it worked perfectly, but as soon as I changed the class names to the font awesome ones it stoped working. Maybe it's something to do with the SVG's. If so can anyone suggest an alternative method.
Stay Safe
Thanks, Jamie :)

You don't need to put fas into classList.toggle method.
function classToggle() {
document.getElementById("toggle").classList.toggle('fa-moon');
document.getElementById("toggle").classList.toggle('fa-sun');
}
document.querySelector('#toggle').addEventListener('click', classToggle);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<i class="fas fa-moon" id="toggle"></i>

Related

Toggle Darkmode in HTML

i want to make some code with javascript, html and css to toggle darkmode and nightmode. But i dont know how to do it
so, when i click the button in line 22, i want it to be able that button to change the stylesheet rel in line 14 from "/dist/css/skins/ralue-theme.min.css" to "/dist/css/skins/ralack-theme. min. css"
*I'm using EJS btw
You should add an onclick event in line 22 and define a function like switchMode in your js file.
You can handle this situation with add and delete classes.
Also please use snippet for codes next time don't send photos like this.
You can use removeAttribute and setAttribute for change the link src. See example:
HTML FILE:
<!--Line 14 of HTML-->
<link rel="stylesheet" href="/dist/css/skins/ralue-theme.min.css" id="link" />
<!--Here we add a id="link"-->
<!--Line 22 of html-->
<a id="nightMode" class="btn btn-night btn-default btn-block fa fa-moon-o" />
JS FILE:
let nightButton = document.querySelector("#nightMode");
let styleSheet = document.querySelector("#link");
nightButton.addEventListener("click",() => {
styleSheet.removeAttribute("src")
styleSheet.setAttribute("src","dist/css/skins/ralack-theme. min. css")
})
See element.setAttribute documentation and element.removeAttribute documentation

Font Awesome in Javascript Error: Uncaught SyntaxError: Unexpected identifier ​

I just discovered a font library named Font Awesome. I tried to integrate it as followed but I got the error message in the console.
" Uncaught SyntaxError: Unexpected identifier "
var button= document.getElementById("btn");
var icon=document.getElementById("ic");
button.addEventListener("click", function(){
icon.innerHTML="<i class="fa fa-wifi" aria-hidden="true"></i>";
}
<head>
<script src="https://use.fontawesome.com/180fe96fd3.js"></script>
</head>
<body>
<button id="btn">Click for wifi</button>
<p>
<span id="ic"></span>
</p>
</body>
Basically, what I want to do is, when the user click the icons, the wifi icons from font awesome appeared in the span area. Am I using the correct method for usage in Javascript? Once again, thank you for your time.
you have write <i> with "" string and inside string use ""
so thats why error generated
use like below two way
icon.innerHTML='<i class="fa fa-wifi" aria-hidden="true"></i>';
or
icon.innerHTML="<i class='fa fa-wifi' aria-hidden='true'></i>";
There's a problem with text escaping. Try icon.innerHTML='<i class="fa fa-wifi" aria-hidden="true"></i>';. Notice the use of single quotes.

Cannot read property 'addEventListener' of null - JavaScript

I have never used JavaScript or CSS before. I have used Actionscript and I find it similar to JavaScript.
I am making a small html page where there is a fadeInUp animation from animation.css
I wanted to do the animation myself, instead of animation.css doing it for me, for practice.
I did everything right, except the animation does not stay at the end opacity, it resets to the css-coded opacity.
I decided to do some javascripting and made this code
(the div that the two animated elements are in is called "toppart")
var beginpart = document.getElementById("toppart");
beginpart.addEventListener("animationend", giveopac, false);
function giveopac()
{
this.style.opacity=1
}
I do not know what is wrong with it (probably something wrong with syntax), but I get this console error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
(anonymous function)
Is the problem with the function or is it with variable? If something is wrong with the event listener, there are about 10 websites that are wrong.
If anybody knows what I am doing wrong, and why it is giving me the error, I would love to know.
If it is still not working it is because in the giveopac event you are trying to access this and adding style to it which is not right.Here this is window object
You might consider changing this
check the following code snippet
var beginpart = document.getElementById("toppart");
// alert(beginpart);
beginpart.addEventListener("animationend", giveopac, false);
function giveopac(event)
{
event.target.style.opacity=1;
event.target.style.background="red";
}
<body>
<div id="toppart">
<p id="first" class="moveupfade">Zane Clark</p>
<p id="subfirst" class="moveupfade">"Keter"</p>
</div>
</body>
Hope this helps;
Found the answer!
I put it after the whole body and changed it to this:
<script>
document.getElementById("toppart").addEventListener("animationend", giveopac);
function giveopac(event)
{
event.target.style.opacity=1;
}
</script>
Thanks to geeky
Make sure that you have your script tags before closing tag of body in html page.
<html>
<body>
<div id="toppart"> <p id="first" class="moveupfade">Zane Clark</p> <p id="subfirst"
class="moveupfade">"Keter"</p> </div>
<script src="myScript.js"></script>
</body>
</html>

Change data-content in a bootstrap popover

I'm really new to coding, I've searched a bit to try to find an answer and I feel like there's a very simple way to do this, but the answers I find I can't understand.
I have this example which shows the popover.
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
I want to change the content of data-content in my JavaScript file
I tried this but it doesn't seem to work.
document.getElementById('test').setAtribute('data-content','hello');
As you are using jquery, try setting the value for content as shown below,
$('#test').data('content', 'hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-toggle="popover" title="Test" data-content="Test"
id="test">popover</span>
Javascript can be a dangerous tool... it can and will silently do nothing if what you write is not valid Javascript.
So this line:
document.getElementById('test').setAtribute('data-content','hello');
has a misspelling in 'SetAttribute', which tries to call a function that doesn't actually exist (since it's misspelled), and so it does nothing at all.
First step when debugging: re-read your code carefully!

jQuery color scheme changer

I have seen a lot of websites that contain a color switcher through which a user can select/pick any color, and the whole page will change accordingly. Below are a few example links....
http://csmthemes.com/themes/beta/static/
http://magna-themes.com/demos/html/flatapp/index.htm
http://envato.nestolab.com/Batekh/style-1/image-slider-version/index-one-page.html
http://ronseta.com/Roof/index_02.html
What I want: I want the same color scheme, but the problem is that I am that expert to create it on my own, so I want the basic logic and some code to start, I have a basic knowledge of JavaScript and jQuery. If there are any free plugins related to that then please share the link, or share some code through which I can start building my own..
Following "http://magna-themes.com/demos/html/flatapp/index.htm"
0.create multiple css files by color
style/colors/default.css
style/colors/green.css
style/colors/red.css
style/colors/pink.css
1.you create a link to css with an id like color-switcher
<link rel="stylesheet" type="text/css" href="style/colors/default.css" id="color-switcher">
2.you create a menu of color picker
<div id="demo-wrapper">
<h2>COLORS:</h2>
<ul>
<li class="green" data-path="style/colors/green.css"></li>
<li class="red" data-path="style/colors/red.css"></li>
<li class="pink" data-path="style/colors/pink.css"></li>
</ul>
<div class="clear"></div>
<p data-path="style/colors/default.css">Restore Default Scheme</p>
</div>
3.you change the path of your link using javascript
$('#demo-wrapper ul li').on('click', function(){
var path = $(this).data('path');
$('#color-switcher').attr('href', path);
});
The basic theory goes like this! You create a theme with buttons, forms, controls etc.. Styling of the elements are usual. If I developed a theme where the user can select a color scheme, I would add a special class to every element which I want the user to modify. for an example :
I've the following html element.
<input type='button' value='submit' class='yourStyle specialClass'>
I've got the following style
.yourStyle{
** Style **
}
I'll use the following sample jQuery code to change the color scheme.
$('document').ready(function(){
$('colorSchemeChoser').click(function(){
$('.specialClass').css('background-color','sampleColor');
})
})
Above is a basic code to start your development.
Try changing the stylesheet dynamically using jQuery (preferred) or Javascript. Each stylesheet has styles defines a particular theme. To make your code look a little professional, try using data-* HTML 5 attributes to change stylesheet.
Below is an example:
Html:
<button id="grayscale" data-theme="style.css">Original</button>
<button id="grayscale-2" data-theme="style2.css">Custom</button>
And js:
$("button[data-theme]").click(function() {
$("head link[rel=stylesheet]").attr("href", $(this).data("theme"));
}
Hope this helps. Let me know if you need any further clarifications. Thanks!
this answer is a demonstration of how 'you can change the background color from user input'
If, however, you wanted to use a completely different 'theme', I would suggest creating different css files, and modifying the style link in your head section (via jquery/javascript) to point to each 'theme'.
This jquery would do the basics for you, changing the background color on three inputs.
$(document).ready(function(){
$('#changeColor').click(function(){
var red= $('#red').val();
var green = $('#green').val();
var blue = $('#blue').val();
var op = $('#opacity').val();
$('html').css("background","rgba("+red + ","+green+","+blue+","+op+")");
});
});
input[type="number"] {
width: 100px;
height: 50px;
}
#red{
background:red;
}
#green{
background:green;
}
#blue{
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="1" id="red" value="255"/>
<input type="number" step="1" id="green" value="255" />
<input type="number" step="1" id="blue" value="255"/>
<input type="number" step="0.1" id="opacity" value="1" />
<button id="changeColor">GO</button>
On your HTML you can add a list with class-name and path to your different css files...
You change your css files dynamically with jquery...
If you want only to change colours check this site out:
http://www.marcofolio.net/webdesign/create_a_better_jquery_stylesheet_switcher.html
good luck
I don't know why this hasn't been mentioned, but jqueryui has a themeroller, with several pre-made themes, and you can make your own. (http://jqueryui.com/themeroller/)
Easiest solution here is to implement a themeswitcher like the one here: https://github.com/harborhoffer/Super-Theme-Switcher
Of course, you could write your own switcher as well, basically you're just switching the src of the jqueryui stylesheet...
You stated you already understand how to switch the style sheet. You could use cookies to make the switch persist between page loads.
This article goes over the concept (also check out the date on it :D)
http://alistapart.com/article/alternate
Here's a really simple solution I put together that I think does what I think you're trying to accomplish.
HTML
<h1>Color Picker</h1>
<input type='text' class="colorPicker"/>
JS
$(".colorPicker").spectrum({
color: "#ff0000",
change: function(color) {
// convert the color output to a usable hex format
color = color.toHexString();
// set the css of your target element to the chosen color
$("body").css({"background-color":color});
}
});
http://jsfiddle.net/edhebert/tbptwz67/
In this demo I'm using the Spectrum Color Picker. It's a free, really easy to use plugin available at https://bgrins.github.io/spectrum/
I'm using a really basic color picker, but Spectrum has all sort of customization options.
Hope this helps.
I just found a cool jQuery plugin from Github which allow you to switch color schemes of the website.
HTML:
<head>
<link href="dist/jquery.colorpanel.css" rel="stylesheet">
<link href="skins/default.css" id="cpswitch" rel="stylesheet">
</head>
<body>
<div id="colorPanel" class="colorPanel">
<a id="cpToggle" href="#"></a>
<ul></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="dist/jquery.colorpanel.js"></script>
</body>
JavaScript:
$('#colorPanel').ColorPanel({
styleSheet: '#cpswitch',
animateContainer: '#wrapper',
colors: {
'#4B77BE': 'skins/default.css',
'#16a085': 'skins/seagreen.css',
}
});
Repository: ColorPanel .
Demo & Documentation: Demo.

Categories