I have a CSS slider that I'm using with a bit of jQuery to change the class of the list item on click. I would also like to have the slider on a timer so every 5s it auto executes the removeClass of the selected list item and adds "selected" class to the next list item in the list if there is no user interaction.
At the same time as changing the class on the li element it needs to change the #slide_images transform to what it needs to be (0px,1100px,2200px,3300px or 4400px) etc.
If it does have user interaction via them selecting a link for a slide then the timer should stop until page reload.
Here is the HTML:
<div id="slide_container">
<div style="transform: translateX(0px);" id="slide_images">
<div class="slide1">
<img src="http://example.com/1.jpg">
<div class="slide-content1">
slide1content
</div>
</div>
<div class="slide2">
<img src="http://example.com/2.jpg">
<div class="slide-content2">
slide1content
</div>
</div>
<div class="slide3">
<img src="http://example.com/3.jpg">
<div class="slide-content3">
slide1content
</div>
</div>
</div>
</div>
Here is the CSS:
.slide-content1,.slide-content2,.slide-content3,.slide-content4,.slide-content5{position:absolute;top:20px;left:0;padding:110px 0 0;width:1100px;color:#fff}
.slide-content2{left:1100px}
.slide-content3{left:2200px}
.slide-content4{left:3300px}
.slide-content5{left:4400px}
#slide_container{width:1100px;height:580px;overflow:hidden;margin:0 auto}
#slide_images{width:5500px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
#slide_images img{padding:0;margin:0;float:left;border:none}
Here is the script:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('.slidenav').on('click', 'li', function(){
$("#slide_images").css("transform","translateX("+$(this).index() * -1100+"px)");
$(".slidenav li").removeClass("selected");
$(this).addClass("selected");
});
});
});
Thanks for any help :).
I have an example with a working rotator. It will rotate every 5 seconds when there is no user interaction. When you click on a item, the timer resets to 0 and continues after 5 seconds with rotation.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="script.js"></script>
</head>
<body>
<ul class="slidenav">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</body>
</html>
CSS:
ul.slidenav li {
color: #000;
}
ul.slidenav li.selected {
color: red;
}
JS:
$(document).ready(function() {
var slides = $(".slidenav li");
//Init slide 1
slideTo(slides[0]);
var slideIndex = 0;
var slideTime = animate();
$(".slidenav li").click(function() {
//Reset the interval to 0 and start it again
clearInterval(slideTime);
slideTime = animate();
var selectedIndex = $(this).index();
var slide = slides[selectedIndex];
slideTo(slide);
});
function slideTo(slide) {
$(".slidenav li").removeClass("selected");
$(slide).addClass("selected");
slideIndex = jQuery(slide).index();
}
function animate() {
return setInterval(function() {
var slide = slides[slideIndex];
slideTo(slide)
slideIndex++;
if (slideIndex == slides.length) {
slideIndex = 0;
}
}, 5000);
}
});
Plunker: https://plnkr.co/edit/ah1CTexSjnROAEPMAitk?p=preview
To execute something with a delay, you can use setTimeout().
You can use a delayTime variable and then modify it on user click event.
A quick approach to the solution would be
var delayTime = 5000; // milliseconds
$(function() {
$('.slidenav').click(function () {
setTimeout(function () {
$('.slidenav li').removeClass('newClass');
}, delayTime);
});
$('.clickedLink').click(function () {
delayTime = 0;
});
});
Notice, I also shortened the code a little bit: $(ready) and .on('click')
Take a look at this codesnippet.
$(document).ready(function(){
$(".slider li:first-child").addClass("active");
setTimeout(autoAddClass, 1000);
});
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$('.slider li:first-child').addClass('active');
setTimeout(autoAddClass, 1000);
}
You should start by setting an interval, and once your user does his interaction, you can clear that interval using clearInterval. Here is a pseudo code:
var interval = setInteval(function(){
// do whatever here...
}, 5000);
$('yourSelector').click(function(){
clearInterval(interval);
// do whatever....
});
Related
I want to show and hide a series of divs based on time interval.
Show div 1 after 4 seconds, show div 2 after a further 4 seconds and so on.
The previous div being hidden, so it appears as if new information is replacing the previous and at time intervals.
I have it working to a point, it's just when I add more divs.
setInterval(function() {
$("#a").hide();
setTimeout(function() {
$("#b").fadeIn('normal');
});
}, 4000);
#b, #c {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
https://jsfiddle.net/Layt8cuy/1/
The first div needs to be there by default, and they stop with the last div with no loop back to the beginning.
Here is basic function Jsfiddle
var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
if (count == 5) {
clearInterval(myInterval);
} else {
count++;
currentDiv.hide();
currentDiv = currentDiv.next();
currentDiv.show();
}
}, 2000);
#b,
#c,
#d,
#e {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
<div id="e">5</div>
You need a variable to track the current visible div. Also it's recommended to use a class to select all divs, otherwise you'll have to select them by tag name, which is an issue if you have other divs that shouldn't be included.
You only need setInterval() and inside it first hide all divs, then show the div with the current index, and finally increment the current index variable if it is still less that the number of divs, otherwise reset it to 0.
var current = 0;
setInterval(function() {
var divs = $(".roll").hide();
divs.eq(current).fadeIn("normal");
if (current < divs.length - 1)
current++;
else
current = 0;
}, 1000);
.roll {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="roll">1</div>
<div id="b" class="roll">2</div>
<div id="c" class="roll">3</div>
To do only one loop, you need to store the ID of the setInterval() and use it in clearInterval() to stop. Here is a solution for the points in your comments:
var current = 0;
var divs = $(".roll");
var timer = setInterval(function() {
if (current < divs.length - 1) {
divs.eq(current).hide();
current++;
divs.eq(current).fadeIn("normal");
} else
clearInterval(timer);
}, 1000);
.roll {
display: none
}
#a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="roll">1</div>
<div id="b" class="roll">2</div>
<div id="c" class="roll">3</div>
a working example, with returning to first div after finish
recursive + timeout
you can use the same method for your situation:
let duration = 1000, // these are miliseconds
activeIndex = 0; // first item to activate
function activateNext() {
let boxes = $('.boxes > div');
// activate current item
boxes.addClass('hide').eq(activeIndex).removeClass('hide');
// increase activeIndex and make reset at end of collection
if (++activeIndex >= boxes.length) activeIndex = 0;
// run the function again after duration
setTimeout(function() {
activateNext(activeIndex);
}, duration)
}
// start the loop
$(window).on('load', activateNext);
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Without looping back to first:
let duration = 1000, // these are miliseconds
activeIndex = 0; // first item to activate
function activateNext() {
let boxes = $('.boxes > div');
// activate current item
boxes.addClass('hide').eq(activeIndex).removeClass('hide');
// increase activeIndex and make reset at end of collection
if (++activeIndex < boxes.length) {
// run the function again after duration
setTimeout(function() {
activateNext(activeIndex);
}, duration)
}
}
// start the loop
$(window).on('load', activateNext);
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You might also consider pure CSS solution:
#a, #b, #c {
position: absolute;
animation: hide 4s linear forwards;
}
#b, #c {opacity: 0}
#b {
animation-delay: 4s;
}
#c {
animation-name: last;
animation-delay: 8s;
}
#keyframes hide {
0%, 99.99% {opacity: 1}
100% {opacity: 0}
}
#keyframes last {
0%, 100% {opacity: 1}
}
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
I want to make a counter on javascript that when you go to certain div, start counting and when you reach the specified number it stops, and if I continue scrolling, the counter no longer keep counting
I have made a Pen with the idea, but when I continue scrolling the counter do not stop, and start to count down, and then stop when reach a low number.
Any idea to make this work?
Thanks in advance.
HTML
<!-- Counter section -->
<div id="counter" class="Wrapper-counter">
<!-- Counter_item -->
<div class="Counter_item">
<h3 class="Counter_h3 right">
<span class="count">
123
</span>
</h3>
<p class="Counter_paragraph right">
<strong>Lorem ipsum</strong>
</p>
</div>
<!-- /Counter_item -->
<!-- Counter_item -->
<div class="Counter_item">
<h3 class="Counter_h3 left">
<span class="count">
123
</span>
</h3>
<p class="Counter_paragraph left">
<strong>Lorem ipsum</strong>
</p>
</div>
<!-- /Counter_item -->
</div>
<!-- /Counter section -->
JS
$(window).on('scroll', function() {
var div_counter = window.pageYOffset;
var scroll_pos_test = $('#counter').offset().top - window.innerHeight; // set to whatever you want it to be
if(div_counter < scroll_pos_test) {
//do stuff
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
codepen here
I didn't understand your code, but I created an example of what you are looking for which might give you a new perspective of how to tackle this problem in an easier way. Check out the working example on CODEPEN.
HTML
<div class="container">
<p data-counter="100">100</p>
</div>
CSS
p {
font-size: 3em;
position: fixed;
color: blue;
}
.container {
position: relative;
height: 700px;
background: #ccc;
}
JS
$(document).ready(function() {
var topCount = 100;
var maxCount = 50;
var startCount = 200;
var endCount = 400;
var currCount = 0;
$(window).scroll(function() {
if (($(window).scrollTop() >= startCount) && ($(window).scrollTop() <= endCount)) {
currCount = Math.floor(maxCount + (maxCount - topCount) * ($(window).scrollTop() - endCount) / (endCount - startCount));
$("p").attr("data-counter",currCount).text(currCount);
}
});
});
It should be pretty straight-forward. I don't have a resetting mechanism since I don't know how you want to do it or if you want to have it at all. but it is easy to add any modification
thanks for the code but it is not what I was looking; I solved the problem by adding the plugin INVIEW JQUERY and the following script, thanks anyway
CODEPEN DEMO
$('#counter').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
if (visible) {
$(this).find('.count').each(function () {
var $this = $(this);
$({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
$(this).unbind('inview');
}
});
Fiddle : http://jsfiddle.net/gLLvux07/
I am creating a countdown using javascript. its working fine when i click the button.
The issue is,
if I click the button when countdown running, it will not start from 0.
I am trying to clear interval in the beginning of function, but not working.
HTML :
<style>
.container {
width:50px;
height:25px;
overflow:hidden;
margin-top:100px;
margin-left:100px;
border:2px solid #ddd;
}
.count {
-webkit-transition: all 1;
-moz-transition: all 1;
transition: all 1;
}
</style>
<div class="container">
<div class="count">
<div>0</div>
</div>
</div>
<div style="text-align:center">
<input type="button" onclick="countdown();" value="Click Me" />
</div>
Javascript Code :
function countdown() {
clearInterval();
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++){
$(".container .count").append("<div>"+i+"</div>");
}
var count1 = 0;
var topmove = -10;
counting = setInterval(function(){
$(".container .count").css({'-webkit-transform': 'translateY('+topmove+'px)'});
count1 = count1+1;
topmove = topmove-10;
if(count1>40) {
clearInterval(counting);
}
},100);
}
Just define counting in global scope & do clearInterval(counting); in starting of function itself. You are not passing parameters to clearInterval.
DEMO
clearInterval requires a parameter telling the script which countdown to stop. Try something like this:
var counting;
function countdown() {
if (typeof counting === 'number') clearInterval(counting);
$(".container .count").html("<div>0</div>")
for(i=1;i<25;i++)
$(".container .count").append("<div>"+i+"</div>");
var count1 = 0,
topmove = -10;
counting = setInterval(function(){
$(".container .count").css({
'-webkit-transform': 'translateY('+topmove+'px)'
});
count1 = count1+1;
topmove = topmove-10;
if (count1>40){
clearInterval(counting);
}
},100);
}
I have created a fadein/Fadeout slider. It's working find on auto. I want to play slider by clicking on next/prev buttons.
HTML
<section class="wrapper">
<ul class="slider">
<li><img src="http://www.tylershields.com/images/gallery/art_gallery.jpg" alt="" /></li>
<li><img src="http://www.goa-tourism.com/images/photogallery/1287634889_pid_kala%20academy%20art%20gallery.jpg" alt="" /></li>
<li><img src="http://www.magnoliabakery.com/uploads/GalleryImageModel/105/filemask/mag1003_magnolia_fall_14original.gallery.jpg" alt="" /></li>
<li><img src="http://www.lancasterconventioncenter.com/_images/_gallery/gallery15.jpg" alt="" /></li>
</ul>
<button data-dir="prev">Prev</button>
<button data-dir="next">Next</button>
</section>
CSS
* {margin:0; padding:0;}
.wrapper {width:800px; margin:0 auto; max-width:100%;}
.slider {position:relative;}
.slider li {position:absolute; top:0; left:0; list-style:none; width:100%; opacity:0;}
.slider li img {width:100%;}
.slider li:first-child {position:relative; display:block; opacity:1;}
Script
var current = 0,
elem = $('.slider li'),
slides = $('.slider li').length,
speed = 3000,
transSpeed = 1000;
function autoSlide(){
current = (current == (slides-1)) ? 0 : +1;
$('.slider').find('li')
.filter(':eq('+ current +')').addClass('current').animate({'opacity':1}, transSpeed)
.siblings('li').removeClass('current').animate({'opacity':0}, transSpeed);
};
var timer = setInterval(autoSlide, speed);
$('button').on('click', function(){
clearInterval(timer);
autoSlide();
timer =setInterval(autoSlide, speed);
});
Fiddle Demo
Your problem is in this line:
current = (current == (slides-1)) ? 0 : current + 1 // you were doing +1 which will always return 1
Your current variable was always set to 1
Hope this will help!
Fiddle Demo
Update
To move previous and next you need to check which button is clicked as you're using only one handler for both, See below code:
You can get clicked element to the autoSlidefunction(element)
Full code
function autoSlide(element) {
var clicked = $(element).text().toLowerCase().trim(); // Get next or prev
if (clicked == "next")
current = (current == (slides - 1)) ? 0 : current + 1; // Current will be incremented
else
current = (current == 0) ? 0 : current - 1; // decrease in current
$('.slider').find('li')
.filter(':eq(' + current + ')').addClass('current').animate({
'opacity': 1
}, transSpeed)
.siblings('li').removeClass('current').animate({
'opacity': 0
}, transSpeed);
};
var timer = setInterval(autoSlide, speed);
$('button').on('click', function () {
clearInterval(timer);
autoSlide($(this)); // to get clicked element to autoSlide()
timer = setInterval(autoSlide, speed);
});
Updated Fiddle
I am working on an image slideshow, and the fadeOut() functionality working with every image change, but the next image appears abruptly. I want it to fade in. I can't seem to get it working.
Here is the code without any fadeIn():
HTML:
<div id="backgroundChanger">
<img class="active" src="background1.jpg"/>
<img src="background2.jpg"/>
<img src="background3.jpg"/>
CSS:
#backgroundChanger{
position:relative;
}
#backgroundChanger img{
position:absolute;
z-index:-3
}
#backgroundChanger img.active{
z-index:-1;
}
Javascript:
function cycleImages(){
var $active = $('#backgroundChanger .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
$next.css('z-index',-2);
$active.fadeOut(1500,function(){
$active.css('z-index',-3).show().removeClass('active');
$next.css('z-index',-1).addClass('active');
});
}
$(document).ready(function(){
setInterval('cycleImages()', 7000);
})
I'd recommend something like this for your interval function:
window.setInterval(function (){
var images = $('#backgroundChanger img');
var active, next;
images.each(function(index, img) {
if($(img).hasClass('active')) {
active = index;
next = (index === images.length - 1) ? 0 : index + 1;
}
});
$(images[active]).fadeOut(1000, function() {
$(images[next]).fadeIn(1000);
});
$(images[next]).addClass('active');
$(images[active]).removeClass('active');
}, 3000);
And this is all you'd need for your css:
#backgroundChanger img:first-child {
display: block;
}
#backgroundChanger img {
display: none;
}
And keep the same HTML and you should be good to go!
You can fadeIn() the next image in the callback of fadeOut() as shown below:
$(window).load(function() {
var $slider = $("#backgroundChanger"),
$slides = $slider.find("img"),
$firstSlide = $slides.first();
function cycleImages() {
var $active = $('#backgroundChanger .active'),
$next = ($active.next().length > 0) ? $active.next() : $firstSlide;
$active.fadeOut(1000, function() {
$active.removeClass('active');
$next.fadeIn(1000).addClass('active');
});
}
setInterval(cycleImages, 3000);
})
#backgroundChanger img {
position: absolute;
width: 150px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
<img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
<img src="http://i49.tinypic.com/28vepvr.jpg" />
<img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
Notes:
Since we're dealing with images, It's better to use load() handler than ready() to make sure the slide show starts after the images are loaded
You can slightly improve the performance by caching the elements accessed frequently
You don't have to play with z-index property at all since both fadeIn() and fadeOut() changes the elements `display property itself