here is my problem. I need on click to change button icon and on another click to go to original state, like +,- and span description like home/back
i dont know what to do. Pleas help.
Here is html...
<div class="navbar-left left">
<button class="toggle btn mr2 white " >
<i class="fa fa-home fa-2x "></i>
<span class="mobile-hide ">Home</a>
</button>
</div>
and bad js
if ($('.toggle').hasClass('fa fa-home fa-2x')) {
$('.toggle').toggleClass('fa fa-home ').html('<span class="mobile-hide ">Home</a>');
} else($('.toggle').hasClass('fa fa-home ')) {
$('.toggle').toggleClass('fa fa-home fa-2x ').html('<span class="mobile-hide ">Back</a>');
}
toggleMenu();
});
You can
jQuery(function($){
$('.toggle').click(function () {
var $i = $(this).find('i').toggleClass('fa-2x');
$(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
})
})
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
<button class="toggle btn mr2 white" >
<i class="fa fa-home fa-2x"></i>
<span class="mobile-hide">Home</span>
</button>
</div>
You can only use .hasClass() to check for a single class Name.
In order to check for many class names I guess is better get the class attribute string and check with .indexOf()
if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {
The same happens with toggleClass. You have to break it down:
$('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')
You might be able to achieve this effect with the ::after pseudo-element. Just change the content property as appropriate based on some class on the button.
A simplified example:
$(function () {
$('#toggle').click(function () {
$(this).toggleClass('on');
});
});
.icon::after {
content: '+';
}
.text::after {
content: 'Home';
}
.on .icon::after {
content: '-'
}
.on .text::after {
content: 'Back'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">
<i class="icon"></i>
<span class="text"></span>
</button>
Related
i tried to make responsive navigation with vue js, when i tried to add '#click' to toggle burger bar or close icon, but it's adding the 'close' icon instead every time i click it.
here's the code
template section
<template>
// ----
<button #click="toggleButton">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="!toggleClose" class="fas fa-times"></i>
</button>
// ----
</template>
script section
<script>
export default {
name: "MultiNav",
data: function() {
return {
toggle: false,
toggleClose: true
};
},
methods: {
toggleButton() {
this.toggle = !this.toggle;
this.toggleClose = !this.toggleClose;
}
}
};
</script>
pict :
i try to use :
<button #click="toggle = ! toggle">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="toggle" class="fas fa-times"></i>
</button>
it still resulting the same result
You need to add a key to the icons.
<button #click="toggle = ! toggle">
<i v-if="!toggle" key="bars" class="fas fa-bars"></i>
<i v-if="toggle" key="times" class="fas fa-times"></i>
</button>
The key will tell Vue's algorithm that the icons are in fact different elements. Without that the virtual dom representation thinks that they are the same element.
Try switching the classes using condition
<button #click="toggle = ! toggle">
<i class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>
I am trying to trigger a function through a event listener with only one click.
But it occurs after two click (in the first time) if I don't do F5 its trigger after one click.
Code:
HTML
<div class="main-header-navbar">
....
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
</div>
JS
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else ADD_FORM.style.display = "none";
});
What am I missing?
You probably need to add style="display: none;" to your ADD_FORM so that it's initially hidden, then when you click on the fa-plus it will display it. See the snippet below:
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");
ADD_FORM_BUTTON.addEventListener("click", function(event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else {
ADD_FORM.style.display = "none"
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="main-header-navbar">
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
<div id="form" style="display: none;">ADD_FORM</div>
</div>
I have two buttons like (thumbs up) and unlike (thumbs down). Clicking on one button should toggle the state of both, only one being active.
Here is what I have attempted so far:
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_'.$row['tag_number_id'].'" value="unlike">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
<button type="button" class="bout like bthumb boutontagthumbup" id="like_'.$row['tag_number_id'].'" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>
<script type="text/javascript">
$(function(){
console.log( "ready!" );
$(".bout").click(function(){
var Id = this.id;
var Idunlike = ("#" + Id + ".bout.unlike");
var Idlike = ("#" + Id + ".bout.like");
if ( $(this).attr("value") == 'unlike' ){
$(Idunlike).toggleClass("boutontagthumbdownclic");
$(Idlike).addClass("boutontagthumbupclicreturn");
console.log(Idunlike);
} else if ( $(this).attr("value") == 'like' ) {
$(Idlike).toggleClass("boutontagthumbupclic");
$(Idunlike).addClass("boutontagthumbdownclicreturn");
console.log(Idlike);
}
});
});
</script>
try this
$(function(){
$(".bout").click(function(){
var id = $(this).attr('id').split('_')[1];
switch($(this).attr('value')){
case 'like' :
$('#like_'+id).addClass('boutontagthumbupclic').removeClass('boutontagthumbupclicreturn');
$('#unlike_'+id).addClass('boutontagthumbdownclicreturn').removeClass('boutontagthumbdownclic');
break;
case 'unlike' :
$('#like_'+id).addClass('boutontagthumbupclicreturn').removeClass('boutontagthumbupclic');
$('#unlike_'+id).addClass('boutontagthumbdownclic').removeClass('boutontagthumbdownclicreturn');
break;
}
});
});
.boutontagthumbupclic{color:green;}
.boutontagthumbdownclic{color:red;}
.boutontagthumbdownclicreturn,
.boutontagthumbupclicreturn{color:#555;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_1" value="unlike"><i class="fa fa-thumbs-down fa-lg"></i></button>
<button type="button" class="bout like bthumb boutontagthumbup" id="like_1" value="like"><i class="fa fa-thumbs-up fa-lg"></i></button>
The following should work:
$(function(){
$(".status button").click(function () {
$(".status").find(".active").removeClass("active");
$(this).addClass("active");
})
});
HTML:
<div class="status">
<button type="button" class="like" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>'
<button type="button" class="unlike" value="like">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
</div>
CSS:
.like i, .unlike i {
color: gray
}
.like.active i {
color: green;
}
.unlike.active i {
color: red;
}
I created a "more" button at the bottom left of my site to display a menu.
When you click on the button, the + becomes x
https://www.s1biose.com/groupe/recettes-et-astuces
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><i class="fas fa-id-card fa-lg"></i> Créer mon profil</li>
</ul>
</div>
How to add a class .overlay-is-navbar-collapse to the body of the page, when the menu is open and delete the class when the menu is closed ?
The following code does not work. If I click outside, the menu closes but the class remains on body.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have tried the following code, but it does not work :
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
Use .one to attach a listener to the body right when the body's class gets added:
$('#dropdown-menu-action').on('click', () => {
$('body').addClass('overlay-is-navbar-collapse');
$('body').one('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
});
why don't you try this,
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
$('.dialog-off-canvas-main-canvas').on('click', () => {
$('body').removeClass('overlay-is-navbar-collapse');
});
Try this,
$('dropdown-menu-action').click(function(){
if($(body).hasClass('overlay-is-navbar-collapse')){
$('body').removeClass('overlay-is-navbar-collapse');
}
else{
$('body').addClass('overlay-is-navbar-collapse');
}
});
First, let me clear you all one thing that i have already searched a lot but couldn't find the answer which will solve my problem. I have a button which when i click it's icon changes and some functions called than when i again click on that button it's icon must be revert and same functions called again.
I have this button:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
while clicking on that button these functions and classes should be called:
$('#voice_icon').click(function () {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
And when i again click on that icon these icons and classes should be called again :
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
$('#voice_icon').click(function() {
voiceAtion.voice();
test.start();
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
Try something like this first time click goes to else and for second click it goes to if. so on..
$('#voice_icon').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
//first code
} else {
//second code
}
$(this).data("clicks", !clicks);
});
Instead of addClass/removeClass use toggleClass.
$('#voice_control').toggleClass("fa-microphone-slash fa-microphone");
use hasClass for check which class to remove and add
$(document).ready(function() {
$('#voice_icon').click(function() {
if ($('#voice_control').hasClass("fa-microphone")) {
$('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
} else {
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
// You can also use global variable and check for true false:
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>
<script>
var x = true;
$('#voice_icon').click(function () {
if(x){
$('#voice_control').removeClass("fa-microphone").addClass("fa-microphone-slash")
x = false;
}
else{
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash")
x = true;
}
$('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});
</script>