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;
}
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 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 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"...
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')
});