I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.
all the help would be appreciated.
here is the code:
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe
one approach is to use toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
http://codepen.io/miguelmota/pen/zGqPOX
Why not simplify this a bit by using a single element with .toggleClass().
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});
The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}
Generally and simply it works like this:
You can use this in general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>
Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.
I combined the solutions of #miguel-mota and #oka.
Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler.
Make sure to use the each function to apply multiple transformations.
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>
This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
An example:
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}
css
.rotate{
transform:rotate(180deg);
color:black
}
jquery
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});
Related
when i click the left button that other right button must be active,then i do the same for the right button it should work,i acheived this using queryselector but when i duplicate the same element,this same code wont work,is there any way i can use queryselectorall to acheive this,thanks.
(function() {
const slick_prev_button = document.querySelector('.prev-button');
const slick_next_button = document.querySelector('.next-button');
const slick_left_button_background = document.querySelector('.left-arrow-color');
const slick_right_button_background = document.querySelector('.right-arrow-color');
slick_prev_button.addEventListener('click', function() {
slick_left_button_background.classList.remove('left-arrow-color');
slick_left_button_background.classList.add('left-arrow-color-active');
slick_right_button_background.classList.remove('right-arrow-color-active');
slick_right_button_background.classList.add('right-arrow-color');
});
slick_next_button.addEventListener('click', function() {
slick_left_button_background.classList.remove('left-arrow-color-active');
slick_left_button_background.classList.add('left-arrow-color');
slick_right_button_background.classList.remove('right-arrow-color');
slick_right_button_background.classList.add('right-arrow-color-active');
});
})();
.dual-button {
display: flex;
justify-content: center;
gap: 10px;
}
.left-arrow-colour i {
color: #f67b54;
background: #efefef;
}
.left-arrow-colour-active i {
color: #efefef;
background: #f67b54;
}
.right-arrow-colour i {
color: #f67b54;
background: #efefef;
}
.right-arrow-colour-active i {
color: #efefef;
background: #f67b54;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<div class="dual-button">
<button class="prev-button left-arrow-colour"><i class=" fas fa-angle-left "></i></button>
<button class="next-button right-arrow-colour"><i class=" fas fa-angle-right "></i></button>
</div>
<div class="dual-button">
<button class="prev-button left-arrow-colour"><i class=" fas fa-angle-left "></i></button>
<button class="next-button right-arrow-colour"><i class=" fas fa-angle-right "></i></button>
</div>
<div class="dual-button">
<button class="prev-button left-arrow-colour"><i class=" fas fa-angle-left "></i></button>
<button class="next-button right-arrow-colour"><i class=" fas fa-angle-right "></i></button>
</div>
You could call your code on the parent element like so:
document.querySelectorAll('.dual-button').forEach(function(parentEl) {
const prev = parentEl.querySelector('.prev-button');
const next = parentEl.querySelector('.next-button');
prev.addEventListener('click', function() {
this.classList.remove('left-arrow-color');
this.classList.add('left-arrow-color-active');
next.classList.remove('right-arrow-color-active');
next.classList.add('right-arrow-color');
});
next.addEventListener('click', function() {
prev.classList.add('left-arrow-color');
prev.classList.remove('left-arrow-color-active');
this.classList.add('right-arrow-color-active');
this.classList.remove('right-arrow-color');
});
});
Also, judging by your css classes you can probably simplify that a lot since you are using the same style rules for the same css classes multiple times (e.g. you could just make a .button-inactive and .button-active class. Or even better, just a .active class. The inactive state would then just be the default style on the button element).
I have 2 icons in a wrapper what I want to achieve is when hover on the icon one of the icons hide and the other one shows. Something to note is the wrappers are getting loaded dynamically so I need to access them through document. Also I'm trying to use this because I only want the hovered element to change. How can I achieve this? I wrote a rough code below. Thanks in advance
var fa_regular;
var fa_solid;
$(document).on('mouseenter', '.wrapper .fa-regular', function() {
fa_regular = $(this)
$(fa_regular).css('display', 'none')
$(fa_solid).css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
fa_solid = $(this)
$(fa_regular).css('display', 'flex')
$(fa_solid).css('display', 'none')
});
.wrapper i {
font-size: 40px;
margin-top: 4%;
cursor: pointer;
}
.wrapper .fa-regular {
display: flex;
}
.wrapper .fa-solid {
display: none;
color: rgb(224, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<div class="wrapper">
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</div>
<div class="wrapper">
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</div>
$obj -> parent.wrapper -> find inside
$(document).on('mouseenter', '.wrapper .fa-regular', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});
I have a feed back section where once a face is clicked it is marked with a specific color and other faces are defaulted to a second color in case the user click on another face (if he changes his mind).
function feedback(tab_number) {
document.getElementById('feedback-' + tab_number).classList.add('clicked');
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>
Your question is not very clear, but I think you might mean something like:
function feedback(tab_number) {
let clicked = document.querySelector("i.clicked");
if (clicked) {
clicked.classList.remove("clicked");
}
document.getElementById("feedback-" + tab_number).classList.add("clicked");
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>
So, when you click on a different face, the previous highlighted face gets their clicked class removed from their class list and it gets added to the new clicked face's class list.
You can do it by checking if the element.classList.contains('clicked'). If it does, then it has already been clicked and then you need to remove the class clicked, otherwise add it.
See below:
Note: I've edited it further to provide functionality for removing and adding class clicked to other faces automatically.
function feedback(tab_number) {
let clickedElem = document.getElementById('feedback-' + tab_number);
let add = false;
if( !clickedElem.classList.contains('clicked') ) {
add = true;
}
let elems = document.querySelectorAll(".feedback i");
elems.forEach(function(el) {
let currTabNum = el.id.substr(9, el.id.length); // get the tab number
if(add && currTabNum <= tab_number) {
document.getElementById('feedback-' + currTabNum).classList.add('clicked');
} else if(!add && currTabNum >= tab_number) {
document.getElementById('feedback-' + currTabNum).classList.remove('clicked');
}
});
}
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="feedback">
<i class="fas fa-angry fa-5x " id="feedback-1" onclick="feedback(1)"></i>
<i class="fas fa-frown-open fa-5x " id="feedback-2" onclick="feedback(2)"></i>
<i class="fas fa-smile fa-5x " id="feedback-3" onclick="feedback(3)"></i>
<i class="fas fa-grin-stars fa-5x " id="feedback-4" onclick="feedback(4)"></i>
</div>
Note:
Check this out:
function feedback(tab_number){
document.getElementById('feedback-1').classList.remove('clicked');
document.getElementById('feedback-2').classList.remove('clicked');
document.getElementById('feedback-3').classList.remove('clicked');
document.getElementById('feedback-4').classList.remove('clicked');
document.getElementById('feedback-' + tab_number).classList.add('clicked');
}
First, you need to know where you're going wrong:
You are dynamically fetching a HTMLElement by id, based on the value passed as the tab to your function. So when that element is fetched, you decorate it with a class clicked. The moment you click a different icon with a different tab number, the class clicked is not removed from the previous click. So Your DOM still has the class added based on the previous clicks.
I would approach this solution by doing the following.
// Get all Clickable Elements
var clickableElements = document.querySelectorAll('.clickable');
// Create a function that clears current state of the rating
function clearAllRatings(){
// Loop through each clickable rating and clear it's clicked class decoration
clickableElements.forEach(function(element)
{
element.classList.remove('clicked');
});
}
// Loop through each element
clickableElements.forEach(function(eachElement){
// Add Click event to each element
eachElement.addEventListener('click', function(event){
// clear current rating
clearAllRatings();
// creat new rating
event.target.classList.add('clicked');
});
});
.feedback {
/*background-color: darkgray;*/
padding: 10px;
width: fit-content;
}
i {
margin: 10px;
/*color: gold;*/
}
.default {
color: black;
}
.clicked {
color: gold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="feedback">
<i class="fas fa-angry fa-5x clickable" id="feedback-1"></i>
<i class="fas fa-frown-open fa-5x clickable " id="feedback-2"></i>
<i class="fas fa-smile fa-5x clickable " id="feedback-3"></i>
<i class="fas fa-grin-stars fa-5x clickable " id="feedback-4"></i>
</div>
I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked.
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off"></i></button>
I create the javascript below, however it changed the button style="display:none" instead change its class.
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
$("#change").toggle(function()
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
}, function() {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
There you go, I used toggleClass (http://api.jquery.com/toggleclass/) function to toggle the class when you click your button, it'll disabled this class fa-toggle-off and activate this class fa-toggle-on on click
(https://api.jquery.com/click/) and vice versa.
$(document).ready(function(){
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-off fa-toggle-on");
});
});
.fa-toggle-off {
background-color: #F00;
}
.fa-toggle-on {
background-color: #0F0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn">
Button <i id="change" class="fa fa-toggle-off">AAA</i>
</button>
Beware, in your code you're checking if #change is clicked, the button got #btn ID attribute.
Wish I helped you.
You can use .toggleClass to add or remove class alternatively
$(document).ready(function() {
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-on");
});
});
.fa-toggle-off {
color: red;
}
.fa-toggle-on {
color: blue;
}
.btn-default {
display: block;
width: 200px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off">Hello my button</i></button>
You can check if on/off class exist and then can remove existing class & add new class as below code:
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
if ($("#change").hasClass("fa-toggle-off"))
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
} else {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
Hope it helps you.
Its me again and I have another jQuery question.
Here is my social share buttons code:
<div class="articleLeft">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-google-plus-square"></i>
<i class="fa fa-linkedin-square"></i>
</div>
How can I make this div sticky after user has scrolled 300px ?
Which method should I use?
Thanks a lot.
You can give a try with this:
JS:
function stick_social() {
var window_top = $(window).scrollTop();
if (window_top > 300) {
$('.articleLeft').addClass('stick');
} else {
$('.articleLeft').removeClass('stick');
}
}
$(function () {
$(window).scroll(stick_social);
stick_social();
});
CSS:
.stick {
position: fixed;
top: 300px;
z-index: 9999;
}