I tried making jQuery slider, which will pause on current image for couple of seconds and then move images horizontally. Also, when slider presents the last image in collection, slider should slowly get back to first image, or when marginLeft attribute reaches value of -200vw(it decreases gradually for -100vw after every image). Most of the time slider works perfectly, but there are also moments when slider ignores my if and goes above -200vw(sometimes up to -3000vw), resulting in showing no images. The only thing that I noticed in this situation is that this problem can occur after around 5-10 minutes spent on other browser tabs.
P.S I apologize for a lack of precise details, because these are the only thing I have noticed with this problem
jQuery/Javascript
$(document).ready(function() {
let delay = 5300;
let currentSlide = 1;
let $carousel = $('#carousel')
let $slideContainer = $carousel.find('.slides');
let $width = 100;
let $slides = $slideContainer.find('.slide')
var interval = setInterval(function() {
$slideContainer.animate({
'marginLeft': '-=' + $width + 'vw'
}, 1000, function() {
currentSlide++;
var abc = $slideContainer.width();
if (currentSlide == $slides.length) {
setTimeout(function() {
$slideContainer.animate({
'marginLeft': '+=' + ($width + 100) + 'vw'
}, 1000, function() {
currentSlide = 1;
$slideContainer.css({
'marginLeft': 0 + 'vw'
})
})
}, (delay / 2.5))
}
})
}, delay);
});
HTML
<section id="carousel">
<div class="slides">
<div class="slide">
<img src="../javaskript/images/slider/gaming1.jpg" style="height:100vh" alt="Introduction image 2 - slider" />
</div>
<div class="slide">
<img src="../javaskript/images/slider/gaming2.jpg" style="height:100vh" alt="Introduction image 2 - slider">
</div>
<div class="slide">
<img src="../javaskript/images/slider/scorn.jpg" style="height:100vh" alt="Introduction image 2 - slider">
</div>
</div>
</section>
CSS
#carousel {
overflow : hidden;
white-space : nowrap;
width : 300vw;
height : 100vh;
}
.slides {
display : flex;
width : 300vw;
margin : 0;
padding : 0;
}
.slide {
width : 100vw;
overflow : hidden;
}
Related
Maybe someone know how to open only one container at a time? Now in this example you can open all three? I would like to open only one and when it's opened change text to "Close". Any ideas?
Here is the link with a code to codepen: code https://codepen.io/jorgemaiden/pen/YgGZMg
I'll be really apreciate for any help and tips!
You can do it in many ways, but according to your reference, I would just add function that loop through your elements which is not your clicked element, then remove active class if it's present
var linkToggle = document.querySelectorAll(".js-toggle");
for (i = 0; i < linkToggle.length; i++) {
linkToggle[i].addEventListener("click", function(event) {
event.preventDefault();
var container = document.getElementById(this.dataset.container);
this.innerText = "Close";
toggleSlide(container);
});
}
function toggleSlide(container) {
for (i = 0; i < linkToggle.length; i++) {
let el = document.getElementById(linkToggle[i].dataset.container);
if (el != container && el.classList.contains("active")) {
el.style.height = "0px";
linkToggle[i].innerText = "Click";
el.addEventListener(
"transitionend",
function() {
el.classList.remove("active");
}, {
once: true
}
);
}
}
if (!container.classList.contains("active")) {
container.classList.add("active");
container.style.height = "auto";
var height = container.clientHeight + "px";
container.style.height = "0px";
setTimeout(function() {
container.style.height = height;
}, 0);
} else {
container.style.height = "0px";
container.addEventListener(
"transitionend",
function() {
container.classList.remove("active");
}, {
once: true
}
);
}
}
.box {
width: 300px;
border: 1px solid #000;
margin: 10px;
cursor: pointer;
}
.toggle-container {
transition: height 0.35s ease-in-out;
overflow: hidden;
}
.toggle-container:not(.active) {
display: none;
}
<div class="box">
<div class="js-toggle" data-container="toggle-1">Click</div>
<div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle active" data-container="toggle-2">Click</div>
<div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle" data-container="toggle-3">Click</div>
<div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
I am trying to resize an image on scroll in javascript with the following conditions:
The image is close to an upper and lower image that should not resize
The image has a minimum height of 0, and a max height of almost all screen height
The image should have height 0 until the lower image is fully seen on screen
The image should be resized, letting the lower image's position fixed at the bottom, until the upper image reaches the top.
The image will then start shrinking, and the upper image should be kept at top until the middle image reaches it's minimum size again.
My approach is as follows:
var upperImg = document.getElementById("scroll-sup");
var middleImg = document.getElementById("scroll-int");
var lowerImg = document.getElementById("scroll-inf");
const minHeight = 0;
const maxHeight = document.documentElement.clientHeight - 50;
document.addEventListener("wheel", function(e) {
var upperRect = upperImg.getBoundingClientRect();
var lowerRect = lowerImg.getBoundingClientRect();
var upperDistanceToTop = window.pageYOffset + upperRect.top - 100;
var delta = Math.floor(e.deltaY);
if (lowerRect.y > maxHeight + 500 || middleImg.height < minHeight) {
middleImg.height = minHeight;
} else if (middleImg.height > maxHeight) {
middleImg.height = maxHeight;
} else if (upperRect.top < 60 && middleImg.height > minHeight) {
middleImg.height -= delta;
window.scrollBy(0, -delta);
} else {
middleImg.height += delta;
}
e.preventDefault();
});
.flex-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.scroll-img {
border-radius: 0px;
width: 100%;
}
<div style="height: 1000px">some HTML</div>
<div class="flex-container">
<img
src="https://raw.githubusercontent.com/sandraparraga/surveillancepower/main/assets/marco_teorico/scroll-sup.png"
id="scroll-sup"
class="scroll-img"
/>
<img
src="https://raw.githubusercontent.com/sandraparraga/surveillancepower/main/assets/marco_teorico/scroll-int.png"
id="scroll-int"
class="scroll-img"
style="position: sticky; object-fit: fill"
/>
<img
src="https://raw.githubusercontent.com/sandraparraga/surveillancepower/main/assets/marco_teorico/scroll-inf.png"
id="scroll-inf"
class="scroll-img"
/>
</div>
<div style="height: 1000px">some more HTML</div>
I fail to see how my code is wrong, but it is not decreasing the image and keeping the upper one in a fixed position.
Any help is appreciated, thanks in advance.
I've set up a jquery slideshow borrowing some code from someone else. I wanted to use the same logic to animate three slideshow panes at once (They should all move and pause at the same time)
However, when using the following code, only the third pane works as expected and I'm not sure why. Can anyone help explain why and look at fixing it?
It may be that I have to try a different method to achieve this, which is fine, but I'd like to at least understand what the problem is. I've got the working Jsfiddle here as well. What should happen is that each window should, after 10 seconds, move to the next slide, then after ten seconds it should go back to the original slide. Only the third window is doing this properly, the others are skipping the interval
<div class='windows'>
<div id='sliderWindow1' class='sliderWindow'>
<ul class='slidesWindow'>
<!-- Trend Graph -->
<li class='slideWindow'>
<div id='trendGraph'>Pane 1</div> <!--jscript to get chart -->
</li>
<!-- total number of votes -->
<li class='slideWindow'>
<div id='totalVotes'>Pane 2</div> <!--jscript to get chart -->
</li>
<li class='slideWindow'>
<div id='trendGraph2'>Pane 1</div> <!--jscript to get chart -->
</li>
</ul>
</div>
<div id='sliderWindow2' class='sliderWindow'>
<ul class='slidesWindow'>
<!-- Related Polls -->
<li class='slideWindow'>
<div id='related'>Pane 1b</div> <!--jscript to get chart -->
</li>
<!-- Likes -->
<li class='slideWindow'>
<div id='likesAndLiker'>Pane 2b</div> <!--jscript to get chart -->
</li>
<li class='slideWindow'>
<div id='relatedPolls2'>Pane 1b</div> <!--jscript to get chart -->
</li>
</ul>
</div>
<div id='sliderWindow3' class='sliderWindow'>
<ul class='slidesWindow'>
<!-- Your Vote -->
<li class='slideWindow'>
<div id='yourLike'>Pane 1c</div> <!--jscript to get chart -->
</li>
<!-- total number of votes -->
<li class='slideWindow'>
<div id='OtherThing'>Pane 2c</div> <!--jscript to get chart -->
</li>
<li class='slideWindow'>
<div id='yourLike2'>Pane 1c</div> <!--jscript to get chart -->
</li>
</ul>
</div>
</div>
Jscript
$(document).ready(function(){
//configuration
var width = 100;
var animationSpeed = 1000;
var pause = 12000;
var currentID = 0;
var currentSlide = 1;
var height = 100;
var StopCounting = true;
//cache DOM
var $Slider = $('.sliderWindow');
var $SlideContainer = $Slider.find(".slidesWindow");
var $Slides = $SlideContainer.find(".slideWindow");
var $SlidesLength = 3;
var interval;
$Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);
//begin the slide show
startSlider();
function startSlider(){
//set interval
interval = setInterval(function(){
console.log(currentSlide + " of " + $SlidesLength);
//margin left -720
$SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
//callback
currentSlide++;
currentID++;
//if this is the last slide go to position one (0px)
if(currentSlide === $SlidesLength){
currentSlide = 1;
$SlideContainer.css('margin-left', 0);
StopCounting = true;
}
});
}, pause);
}
//pause the slider by clearing the interval
function pauseSlider(){
clearInterval(interval);
}
});//end of document ready
CSS
.windows {
height: 200px;
width: 100%;
display: inline-block;
margin-top: 20px;
background-color: #C2F0FF;
}
.sliderWindow {
margin-left: 10%;
height: 100px;
/*width: 20%;*/
width: 100px;
background-color: #2EB8E6;
display: inline;
float: left;
overflow: hidden;
}
.slidesWindow{
display: block;
width: 300px;
height: 100px;
margin: 0;
padding: 0;
}
.slideWindow {
float: left;
list-style-type: none;
/*width: 100%;*/
width: 100px;
height: 100px;
}
From the JSfiddle, I could not figure out the exact response you are looking for. But I think I ran into a similar problem when I used multiple accordion elements in bootstrap/jquery the other day. The solution to the issue was to rename the div id and class id's the second and third time I was using the accordion. The analogy for you would be to check you div id and class id names and see if you can change their names in the second and third copies of the element.
I located the answer, the problem is where the "current slide" was adding up. This adds up for each slide that animates, and therefore "current slide" should start at 0 and Slide length should be equal to the number of slides times the number of windows.
Therefore the answer is:
$(document).ready(function(){
//configuration
var width = 100;
var animationSpeed = 1000;
var pause = 12000;
var currentID = 0;
var currentSlide = 0;
var height = 100;
var StopCounting = true;
//cache DOM
var $Slider = $('.sliderWindow');
var $SlideContainer = $Slider.find(".slidesWindow");
var $Slides = $SlideContainer.find(".slideWindow");
var $SlidesLength = 6;
var interval;
$Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);
//begin the slide show
startSlider();
function startSlider(){
//set interval
interval = setInterval(function(){
//margin left -720
$SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
//callback
currentSlide++;
currentID++;
alert(currentSlide);
//if this is the last slide go to position one (0px)
if(currentSlide === $SlidesLength){
currentSlide = 0;
$SlideContainer.css('margin-left', 0);
StopCounting = true;
}
});
}, pause);
}
//pause the slider by clearing the interval
function pauseSlider(){
clearInterval(interval);
}
});
I have created a simple slider
html
<div id="sldvid1" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
$
var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
curnum = $(".slider img:visible").attr('picnum');
//$("#sldvid1 img[picnum=" + curnum + "]").fadeOut();
if(curnum == 3){
curnum = 1;
}
else
{
curnum++;
}
// $(".slider img").hide();
//$(".slider img[picnum=" + curnum + "]").show();
$(".slider img").hide();
$(".slider img[picnum=" + curnum + "]").show();
//console.log(curnum);
}
CSS
.slider{
height:50px;
}
Demo
http://jsfiddle.net/mparvez1986/vf401e2y/
Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well
Thanks
I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.
If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.
You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.
By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.
jsfiddle
HTML
<div id="sldvid1" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
CSS
.slider {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
.slider img {
display: none;
width: 100%;
position: absolute;
}
.slider .active {
display: inline-block;
}
.slider .sliding {
display: inline-block;
}
JavaScript
var timer = setInterval(runSlide, 2000);
function runSlide() {
// Slide each slider on the page.
$(".slider").each(function (index, element) {
// Get the elements involved in the slide.
var numChildren = $(this).children().length;
var activeChild = $(this).children(".active");
var activeSlideTo = $(activeChild).attr("data-slide-to");
var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
// Prepare for slide.
$(activeChild).css("margin-left", "0%");
$(nextChild).css("margin-left", "-100%");
$(activeChild).addClass("sliding");
$(nextChild).addClass("sliding");
$(activeChild).removeClass("active");
// Slide using CSS margin-left.
$(activeChild).animate({"margin-left": "100%"}, 1000, function () {
$(this).removeClass("sliding");
});
$(nextChild).animate({"margin-left": "0%"}, 1000, function () {
$(this).addClass("active");
$(this).removeClass("sliding");
});
});
}
Ended with following
setInterval(function() {
$('#sldvid1 > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#sldvid1');
}, 3000);
HTML
<div id="slider">
<img src="http://www.alleywatch.com/wp-content/uploads/2013/04/brand.jpeg" id="image1" />
<img src="http://www.ereleases.com/prfuel/wp-content/uploads/2012/07/brand_stamp.jpg" id="image2" />
<img src="http://www.submitedge.com/blog/wp-content/uploads/2013/04/Creating-a-Positive-Brand-Image.jpg" id="image3" />
</div>
<div id="slider-back"></div>
CSS
#slider {
height:296px;
overflow:hidden;
width:822px;
position:absolute;
left:50%;
margin-left:-411px;
top:87px;
z-index:20;
}
#slider-back {
position:absolute;
left:50%;
margin-left:-411px;
height:296px;
z-index:29;
top:87px;
width:822px;
background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent;
jquery
$(document).ready(function () {
var imgs = $('#slider > a > img');
var z = 1;
var previousImageId = "";
$(imgs[0]).show();
function loop(ev) {
imgs.delay(5000).slideUp('slow').eq(z).slideDown(500, function () {
check = z != imgs.length - 1 ? z++ : z = 0;
loop();
});
}
loop();
});
I tried in fiddle
http://jsfiddle.net/ee9R6/
I want to output like
http://www.lulupu.com/ (Right side our manufactures modlue vertical slider)
I would go a slightly different route
http://jsfiddle.net/ee9R6/4/
Instead of sliding all of the elements up, which ends up queuing the slide down, you can slide up the current img and slide down the next image at the same time.
function loop(ev) {
$(imgs[z]).slideUp("slow");
check = z != imgs.length - 1 ? z++ : z = 0;
$(imgs[z]).slideDown("slow");
setTimeout(loop, 5000);
}