Here is simple jQuery slider, but i want to set this as when the last img div reach then if we click on next it should be return to the first one again and same as if we are going to back side with the previous button the if the first img div reach then it should be return as last one same as backside.
i tried this code but it not working:
$(document).ready(function(){
$('.next').click(function(){
var active = $('.slide .active');
if(active.next('div').length != 0) {
$('.slide').find('div.active').next().
addClass('active');
$('.slide').find('div.active').prev().
removeClass('active');
}
else {
$('#slide div:first').addClass('active');
}
});
$('.prev').click(function(){
if(active.prev('div').length != 0) {
$('.slide').find('div.active').prev().
addClass('active');
$('.slide').find('div.active').next().
removeClass('active');
}
else {
$('#slide div:last').addClass('active');
}
});
});
My whole slider code is:
$(document).ready(function(){
$('.next').click(function(){
$('.slide').find('div.active').next().
addClass('active');
$('.slide').find('div.active').prev().
removeClass('active');
});
$('.prev').click(function(){
$('.slide').find('div.active').prev().
addClass('active');
$('.slide').find('div.active').next().
removeClass('active');
});
});
.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}
.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.container .slide div img
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .slide div.active
{
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
When clicking on next - check if the last div has the class active. If so remove it and add it to the first div. When clicking on prev - do the opposite.
Snippet:
$(document).ready(function(){
$('.next').click(function(){
$('.slide').find('div.active').next().addClass('active');
$('.slide').find('div.active').prev().removeClass('active');
if ($('.slide div:last-of-type').hasClass('active')) {
$('.slide div:last-of-type').removeClass('active');
$('.slide div:first-of-type').addClass('active');
}
});
$('.prev').click(function(){
$('.slide').find('div.active').prev().addClass('active');
$('.slide').find('div.active').next().removeClass('active');
if ($('.slide div:first-of-type').hasClass('active')) {
$('.slide div:first-of-type').removeClass('active');
$('.slide div:last-of-type').addClass('active');
}
});
});
.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}
.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.container .slide div img
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .slide div.active
{
opacity: 1;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
Related
I'm trying to learn how to use the parallax effect using simple JavaScript and CSS.
my JavaScript is :
window.addEventListener('scroll', function(){
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
from my understanding of things, it should make the element called third and second scroll left by the same value as the vertical scroll. But it doesn't work and I can't find what's the problem here.
My whole code is:
* {
scroll-behavior: smooth;
}
body {
size: 100%;
margin-top: 0px;
margin-left: 0px;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#sixth {
z-index: 10;
}
#text {
position: absolute;
color: white;
white-space: nowrap;
font-size: 7.5vw;
z-index: 9;
}
<section>
<img src="Plan-parallax-1.png" id="first">
<img src="Plan-parallax-2.png" id="second">
<img src="Plan-parallax-3.png" id="third">
<img src="Plan-parallax-4.png" id="fourth">
<img src="Plan-parallax-5.png" id="fifth">
<h2 id="text">Monde parallele</h2>
<img src="Plan-parallax-6.png" id="sixth">
</section>
<script>
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
document.getElementById("third").style.left = window.scrollY + 'px';
})
</script>
If your code is simplified down to just focus on the question of moving an element based on scroll, it works fine. Example included
window.addEventListener('scroll', function() {
document.getElementById("second").style.left = window.scrollY + 'px';
})
* {
scroll-behavior: smooth;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom right, #350529, #45392c);
z-index: 100;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<body style="size: 100%; margin-top: 0px; margin-left: 0px;">
<section>
<img src="https://picsum.photos/600" id="second">
</section>
</body>
</html>
I want to add a preloader to my website and I have this code:
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });
</script>
<style>
.elementor-element-edit-mode .loader{
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;
}
</style>
Instead of this simple fadeout effect, I want it to look like curtains closing, just like the following example:
Any idea how to achieve this unique fadeout effect based on the code I have?
Thank you!
Cover the background with a centered white box and let it collapse to 0 width.
setTimeout(() => {
$("#loader .logo").animate({ opacity: 0 }, 1000);
$("#loader .cover").animate({ width: "0%" }, 1000, () => {
$("#loader").hide(); // When animation is complete hide the element.
});
}, 1500);
#bg {
background: url('http://placekitten.com/630/195');
width: 630px;
height: 195px;
position: absolute;
}
#loader {
position: fixed;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#loader .logo {
background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 150px;
height: 150px;
}
#loader .cover {
background: #fff;
width: 100%;
height: 100%;
position: absolute;
}
body { margin: 0 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="loader">
<div class="cover"></div>
<div class="logo"></div>
</div>
When scrolling down the page the sticky menu is enabled and gets little jerky. What's the issue and how to get smooth animation.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(100);
$('.sticky-menu').fadeIn(100);
} else {
$('.head_section').fadeIn(100);
$('.sticky-menu').fadeOut(100);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
transition: all 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
Is there any solution for this?
In your example, you used jQuery for the animation. So you need to remove the transition from your CSS. You can only use one, jQuery OR CSS, but not both in this case.
var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top + 150) {
$('.head_section').fadeOut(1000);
$('.sticky-menu').fadeIn(1000);
} else {
$('.head_section').fadeIn(1000);
$('.sticky-menu').fadeOut(1000);
}
});
.home {
height: 2000px;
}
.head_section {
height: 100px;
width: 100%;
background: black;
}
.sticky-menu {
display: none;
position: fixed;
top: 0;
background: red;
height: 100px;
right: 0;
left: 0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
<div class="head_section"></div>
<div class="sticky-menu"></div>
</div>
I have an element I would like to start off by being hidden then show after 1 second. Here is my html and my css.
function showLogo() {
var logo = document.getElementById("logo");
logo.classList.add( "notVisible" );
logo.classList.remove( "visible" );
}
setTimeout(showLogo, 1000);
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#container {
height: 100%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;
background-color: white;
vertical-align: middle;
}
img {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
#logo {
position: absolute;
display: inline-block;
left:50%;
top:50%;
margin:-25vh 0vh 0vh -25vh;
height: 50vh;
width: 50vh;
}
.notVisible {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.7s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="logo" class="notVisible">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
nothing is showing up. I had tried previously with jQuery and not working either so I decided to go with a full javascript solution but still not working. Any ideas why. Thanks for your time.
You've to add the visible class and to remove the notVisible one instead, like :
logo.classList.add( "visible" );
logo.classList.remove( "notVisible" );
Hope this helps.
function showLogo() {
var logo = document.getElementById("logo");
logo.classList.add( "visible" );
logo.classList.remove( "notVisible" );
}
setTimeout(showLogo, 1000);
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#container {
height: 100%;
width: 100vw;
background-color: white;
min-height: 580px;
text-align: center;
background-color: white;
vertical-align: middle;
}
img {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
#logo {
position: absolute;
display: inline-block;
left:50%;
top:50%;
margin:-25vh 0vh 0vh -25vh;
height: 50vh;
width: 50vh;
}
.notVisible {
opacity: 0;
}
.visible {
opacity: 1;
transition: opacity 0.7s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="logo" class="notVisible">
<img id="rays" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
<img id="base" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
<img id="roue" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
<img id="letters" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
</div>
You wrote:
logo.classList.add( "notVisible" );
logo.classList.remove( "visible" );
But it should be:
logo.classList.remove( "notVisible" );
logo.classList.add( "visible" );
Also your <div id="container"> is missing a closing </div>.
Everything is correct, however your function classes need to be switched. You need to be removing the notVisible and adding the visible class:
function showLogo() {
var logo = document.getElementById("logo");
logo.classList.add( "visible" );
logo.classList.remove( "notVisible" );
}
setTimeout(showLogo, 1000);
I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});
You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>
$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.
Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});
See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>