I am using a slider using Slick and I want to change the left and right arrows text into (next and prev) after hovering on it. How can i do this using a javascript function ?
<div class="left-slider-arrow slider-arrow">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="right-slider-arrow slider-arrow">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
$(".left-slider-arrow").click(function(){
//now which text to change?
});
just edit slick-theme.css, watch line 89 and 107
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
replace '←' to "nedded text"...
Related
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 try to navigate onkeydown with the arrow keys left and right throw my website.
With my font awesome links it is working, but I want that it also works onkeydown with the arrow keys on my keyboard.
One problem is, that my site use localization for german an english. That is why my url's look like this:
https://www.example.com/de
https://www.example.com/en
https://www.example.com/de/Arbeiten
https://www.example.com/en/Projects
Here is my HTML:
<div>
<a href="{{ route('contact') }}" onkeydown="if(e.keyCode == 37) ? window.location.href={{ route('contact') }} : " class="left-arrow arrow-home-left">
<i class="fas fa-angle-left fa-5x"></i>
</a>
</div>
<div>
<a href="{{ route('projects') }}" onkeydown="if(e.keyCode == 39) ? window.location.href={{ route('projects') }} : " class="right-arrow arrow-home-right">
<i class="fas fa-angle-right fa-5x"></i>
</a>
</div>
And my CSS:
body {
background-color: green;
}
.arrow-home-right {
display: inline;
top: 50%;
right: 0;
color: white;
background-color:red;
position: fixed;
}
.arrow-home-left {
display: inline;
top: 50%;
left: 0;
color: white;
background-color:red;
position: fixed;
}
.arrow-home-right:hover, .arrow-home-left:hover {
display: inline;
color: black;
}
Here is my JSFiddle:
https://jsfiddle.net/djosxy7z/15/
I want to jump to the next site/page with the arrow keys onkeydown. With the font awesome links it is working, but not wit the keyboard.
Hope, somone can give me a hint. :)
e: Do I have to call the onkeydown function on the body?
You can capture the keydown event with your body tag. Here is an example:
<body onload="onload_handler()">
<div>
<a href="{{ route('contact')}}" class="left-arrow arrow-home-left">
<i class="fas fa-angle-left fa-5x"></i>
</a>
</div>
<p></p>
<div>
<a href="{{ route('projects')}}" class="right-arrow arrow-home-right">
<i class="fas fa-angle-right fa-5x"></i>
</a>
</div>
<script>
function onload_handler() {
document.body.addEventListener("keydown", keydown_handler);
}
function keydown_handler(e) {
let txt = "keydown_handler: keycode = " + e.keyCode;
let anchor = 0;
if(e.keyCode == 37) {
anchor = document.body.querySelector(".left-arrow")
txt = txt + ": left arrow";
} else if(e.keyCode == 39) {
anchor = document.body.querySelector(".right-arrow")
txt = txt + ": right arrow";
}
if(anchor)
txt = txt + ": " + anchor.href;
console.log(txt);
if(anchor)
anchor.click();
}
</script>
</body>
Here is a link to the same site that you posted your fiddle on, using the example above. The example shows which keys you press in the console.
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 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')
});
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;
}