jQuery show next image on click doesn't work with .first - javascript

I'm trying to fade into view the next image toggleImg() is called from an onClick, however when we get to the end of the list and I start from the beginning again the fade effect doesn't work.
I assume it has something to do with the way the HTML is loaded in the dom and that the last image tag has a higher priority (as its further down the dom).
Do you know why the fade effect doesn't work when we reach the bottom of the list and start from the beginning again?
$('.next').click( function() {
toggleImg();
});
function toggleImg() {
//Setup vars
var current = $('ul#feature-image li.current');
var next = current.next();
//tag this guy to be deleted later
current.addClass('old');
//check if were at the end of the list
if (next.length != 1) {
current = $('ul#feature-image li').first();
current.addClass('current imgFadeIn');
} else {
current.next().addClass('current imgFadeIn');
}
//delete the last guy now the animation is complete
setTimeout(function() {
$('ul#feature-image li.old').removeClass('current old imgFadeIn');
}, 700);
}
.next{
position:absolute;
top: 0;
left: 0;
background: pink;
padding: 10px 20px;
z-index: 9999;
}
.imgFadeIn {
animation-name: imgFadeIn;
animation-duration: 400ms;
animation-fill-mode: forwards;
}
#keyframes imgFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
ul#feature-image {
padding: 0px 0px;
margin: 0px 0px;
}
ul#feature-image li {
width: 100%;
height: auto;
min-height: 700px;
display: none;
position: absolute;
}
ul#feature-image li img {
width: 100%;
height: auto;
min-height: 100%;
z-index: 0;
position: absolute;
}
ul#feature-image li.current {
z-index: 99;
display: block;
}
ul#feature-image li.current img {
z-index: 50;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="feature-image">
<li class="current"><img src="http://via.placeholder.com/350x200" alt="img"></li>
<li><img src="http://via.placeholder.com/300x230" alt="img"></li>
<li><img src="http://via.placeholder.com/320x100" alt="img"></li>
<li><img src="http://via.placeholder.com/400x250" alt="img"></li>
</ul>
<div class="next">next</div>
As requested JSFiddle - https://jsfiddle.net/Lm99d6f0/1/
* Notice the fade, until the last list item

You need to add z-index to .old element.
ul#feature-image li.old {
z-index: 98;
}
https://jsfiddle.net/Lm99d6f0/2/

Related

How to create an image that repeats for a js fade in and out background slideshow?

I am currently building a website and I want a aesthetically pleasing landing page with a background fade in and out slideshow comprised of pictures that repeat y and x. I have the fading slideshow working perfectly and all I need is to repeat the image across the screen. Adding background: repeat to the CSS does not work. Below is may code:
HTML:
<div class="mybody" id="slider">
<div>
<h2>Dog Adoption</h2>
<p>Find the perfect match for your new four legged companion</p>
</div>
</div>
JavaScript:
var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
imgArray = [
'../../static/main/images/slideshow/dog2.jpg',
'../../static/main/images/slideshow/dog3.jpg',
'../../static/main/images/slideshow/dog4.jpg',
'../../static/main/images/slideshow/dog1.jpg',
];
//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
// note the slides reference will now contain the images so we can access them
}
//
// Our slideshow function, we can call this and it flips the image instantly, once it is
called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slides[curIndex]);
curIndex++;
if (curIndex === slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
setTimeout(function () {
slideShow();
}, imgDuration);
};
buildSlideShow(imgArray);
slideShow();
CSS:
.mybody{
width: 100%;
min-height: 100vh;
max-height: fit-content;
top: 0px;
left: 0px;
padding: 0px;
/*background: url(../images/slideshow/dog1.jpg);*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0px;
position: relative;
background-repeat: repeat;
}
.mybody img {
transition: opacity 1.5s;
position: absolute;
left: 0;
top: 0;
opacity:0;
background-repeat: repeat;
}
.mybody img.fadeIn {
opacity:1;
}
When I just set the background image as a fixed image (no JS) I get the desired result:
However when I comment out the backgorund image (as in above code) and just have the JS slideshow as the background, this is the result:
I essentially just need this image from the second picture to repeat as in the first picture and cannot figure out how to make this happen although I am sure there is a simple fix/solution. If anyone could be of help it would be much appreciated. Thanks in advance!
You can't repeat an image without duplicating it. But you can repeat background so, you can make the slide using divs with background. Note the usage of css classes instead of jquery fade.
slide = 1;
setInterval(function() {
$(".slide").removeClass("active");
$(".div" + slide).addClass("active");
slide++
if (slide == 4) {
slide = 1;
}
}, 1000)
body {
height: 100vh;
width: 100%;
position: relative;
padding: 0;
margin: 0;
text-align: center;
padding: 30px;
}
.slide {
background-repeat: repeat;
background-size: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: 1000ms all;
}
.slide.active {
opacity: 1;
}
.div1 {
background: url('https://picsum.photos/id/101/200');
}
.div2 {
background: url('https://picsum.photos/id/102/200');
}
.div3 {
background: url('https://picsum.photos/id/103/200');
}
.text {
position: relative;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="slide div1">
</div>
<div class="slide div2">
</div>
<div class="slide div3">
</div>
<div class="text">
<h1>dog trainer</h1>
<p>best in the world</p>
</div>
</body>

How can I dim the content with a semitransparent overlay when hovering a dropdown menu?

I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.
I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?
The dropdown list has a class of .dropdown
body::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
}
.dropdown:hover body::after {
opacity: 0.5;
}
Link to my project in case that helps:
https://annaxt.github.io/product_landing_page/plant_store.html
Thank you!
You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 0).
let overlay = document.getElementById("overlay");
function showOverlay() {
overlay.style.zindex = 9;
overlay.style.opacity = 0.3;
}
function hideOverlay() {
overlay.style.zindex = -1;
overlay.style.opacity = 0;
}
#overlay {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: black;
opacity: 0;
z-index: -1;
transition: opacity .8s;
}
.dropdown {
font-size: 50px;
background: #369;
color: white;
font-family: sans-serif;
}
<body>
<div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
<div id="overlay" />
</body>
I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js.
Below is code to help you.
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("body").addClass("open");
});
$(".dropdown").mouseleave(function() {
$("body").removeClass("open");
});
});
.main {
display: flex;
}
.open {
height: 100%;
width: 100%;
background: #232323;
transition:.5s;
}
.dropdown {
background-color: #f5f5f5;
height: 200px;
width: 200px;
margin-right: 15px;
transition:.5s;
}
.main:hover .dropdown{
filter:blur(1px);
}
.main:hover .dropdown:hover {
background-color: red;
filter:blur(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div class="dropdown">
dropdown1
</div>
<div class="dropdown">
dropdown2
</div>
<div class="dropdown">
dropdown3
</div>
<div class="dropdown">
dropdown4
</div>
</div>
</body>

target .class:after:hover in jQuery

I need to target this :after in jQuery:
.a1 {
position: relative;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
background: #3f92c3;
}
The scroll code looks like this (example):
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {}
});
});
HTML:
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
I found this out after searching alot and it worked byt i don't know how the underline can keep the hover color after i mouseleave .a1 :
$('#menuwrapper').mouseenter(function() {
if ($('#pseudo').length) {
$('#pseudo').remove();
} else {
var css = '<style id="pseudo">.a1::after{background: red !important;}</style>';
document.head.insertAdjacentHTML('beforeEnd', css);
};
});
I tried mouseleave but it didn't work.
So i just want that if i scroll (that i know how it works) that the underline under the menu .a1 stay's black , because if i leave the underline hover it goes back to
.a1:after {
background: #3f92c3;
}
I want it to stay black.
pseudo elements like :before and :after are not the part of DOM because they are not real elements as called pseudo...so you can't target them using jQuery
As you are adding class scrolled on scroll, so better to use this class in css like
.scrolled .a1:after{
background: black;
}
$(function() {
var header = $("#header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.addClass("scrolled");
} else {
header.removeClass("scrolled");
}
});
});
body {
margin-top: 150px;
font: 13px Verdana;
height: 500px
}
#header {
list-style: none;
padding: 0;
display: flex;
}
#header li {
margin: 0 10px;
}
.a1 {
position: relative;
font-weight: bold;
text-decoration: none;
}
.a1:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #3f92c3;
transition: width .4s linear;
-webkit-transition: width .4s linear;
}
.a1:hover:after {
width: 100%;
left: 0;
}
.scrolled .a1:after {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="header">
<li><a class="a1" href="#">Portfolio</a></li>
<li><a class="a1" href="#">Services</a></li>
<li><a class="a1" href="#">Contact</a></li>
</ul>
try to use jQuery hover method, but also you cant touch :after :before elements from jQuery
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");});

Sliding images inward from different direction

I would like to have the first image slide from left to right. The second image slides from left to right, and the third image will be coming from the bottom to top. I managed to slide the first image from left to right with the answers I found here on stackoverflow. But when I modified the script & css for the other images, they're not sliding. I am not so knowledgeable in javascript.
$(document).ready(function() {
function animateImgs() {
$('ul.slide1 li:not(.visible)').first().animate({
'margin-right': '500px'
}, 2000, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.content {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.img1 {
max-width: 300px;
max-height: 300px;
z-index: 2;
}
.img2 {
max-width: 260px;
max-height: 260px;
z-index: 3;
left: 200px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
z-index: 4;
left: 65px;
top: 235px;
}
/* -------------------------------------------------------------------- */
ul {
padding: 0;
margin: 0;
overflow: hidden;
}
ul.slide1 li {
float: right;
margin: 0 10px 0 0;
margin-right: 9999px;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
<ul class="slide1">
<li>
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
</li>
</ul>
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
<ul class="slide3">
<li>
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
</li>
</ul>
</div>
Steps:
Define a container element with class slideContent
Within container define slide elements with class slide
Specify sliding direction to slide elements with either slideUp, slideDown, slideLeft or slideRight
Specify data-margin to place element in container by sliding
Do not define following in CSS (instead use data-margin attribute in slide element):
margin-bottom for slideUp element
margin-top for slideDown element
margin-right for slideLeft element
margin-left for slideRight element
$(document).ready(function() {
function animateImgs() {
// Animation duration
var duration = 200;
// Get element reference needs to be shown
var el = $('.slideContent .slide:not(.visible)').first();
if (el.length === 0) {
console.log('No more elements found');
return;
}
// Read the margin value
var marginValue = el.attr('data-margin');
// Direction
var marginDirection,
animationProp = {};
// Animate now
if (el.hasClass('slideLeft')) {
marginDirection = 'margin-right';
} else if (el.hasClass('slideRight')) {
marginDirection = 'margin-left';
} else if (el.hasClass('slideUp')) {
marginDirection = 'margin-bottom'
} else if (el.hasClass('slideDown')) {
marginDirection = 'margin-top'
}
if (typeof marginDirection === 'undefined') {
// No valid animation direction defined
console.log('Invalid animation direction');
return;
}
animationProp[marginDirection] = marginValue;
el.animate(animationProp, duration, function() {
$(this).addClass('visible');
animateImgs();
});
}
animateImgs();
});
.slideContent {
position: relative;
margin: 0 auto;
top: 0;
left: 0;
width: 500px;
height: 500px;
border: 1px solid #000;
overflow: hidden;
}
.slideContent .slide {
position: absolute;
}
.slideContent .slideLeft {
right: -100%
}
.slideContent .slideRight {
left: -100%
}
.slideContent .slideUp {
bottom: -100%
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.img1 {
max-width: 300px;
max-height: 300px;
}
.img2 {
max-width: 260px;
max-height: 260px;
top: 100px;
}
.img3 {
max-width: 200px;
max-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
<img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
<img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
<img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</div>

Making my own slider

I am making a slider and am having a few issues.
1) On first slide the animation doesn't animate.
2) The spacing for the last box is off in the beggining but as the slider progresses it corrects.
3) Sometimes the animations have some stuttering.
I have put this in a codepen here:
http://codepen.io/mpaccione/pen/MyJNxM
Any advice is much appreciated. I am unsure why these issues are arising. I am using css transitions for the animation and javascript/jquery to change the css/dom/calcs.
CODE
<style type="text/css">
html,body {
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
box-sizing: border-box;
}
#slider {
width: 100%;
height: 100%;
display: block;
position: relative;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
#slider ul {
padding: 0;
margin: auto;
display: block;
top: 50%;
position: relative;
transform: translateY(-50%);
white-space: nowrap;
}
#slider li {
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
}
.sliderContainer {
width: 60%;
height: 200px;
overflow: hidden;
background-color: white;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative;
}
</style>
<div class="sliderContainer">
<div id="slider">
<ul>
<li style="background-color: red">a</li>
<li style="background-color: green">b</li>
<li style="background-color: blue">c</li>
<li style="background-color: orange">d</li>
<li style="background-color: purple">e</li>
<li style="background-color: yellow">f</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).on("ready", function(){
var slider = $("#slider"),
sliderWidth = slider.outerWidth(true),
img = slider.find("li"),
imgWidth = img.outerWidth(true),
imgCount = img.length,
imgSize = sliderWidth/imgCount,
imgHorMargin = parseFloat(img.css("margin-left")) + parseFloat(img.css("margin-right")),
imgVerMargin = parseFloat(img.css("margin-bottom")) + parseFloat(img.css("margin-top")),
imgSizeX = (imgSize-imgHorMargin),
imgSizeY = (imgSize-imgVerMargin);
slider.find("li").css({"width": imgSizeX, "height": imgSizeY});
(function slideActivate(){
setTimeout(function loop(){
slider.css("transition-duration", "0.5s");
slider.css("left",-imgSize);
setTimeout(function(){
console.log("timeout2");
firstImage = slider.find("li")[0];
firstImage.remove();
slider.css("transition-duration", "0s");
slider.css("left", "0px");
setTimeout(function(){
console.log("timeout3");
slider.find("ul").append(firstImage);
requestAnimationFrame(slideActivate);
}, 100);
}, 500);
}, 2000);
})();
});
</script>
Turns out that the margin issue was do to the browser rendering space as the elements were inline-block. Browsers add uneditable spacing.
The best solution I have found is to make the parent of the ul to have font-size:0.
The second issue was the first slide not animating which was because I did not have an initial css left value set to animate from.

Categories