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);
}
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 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....
});
I'm making an image carousel
see my fiddle : https://jsfiddle.net/gd2n6paw/8/
i'm new to jquery and just wanted to know that how can we make carousel 'next' and 'prev' controls thanks for the help .
you can see my code here also :
my html
<div class="slider">
<div class="container" id="img-slider">
</div>
</div>
<button onclick="prev()">
prev
</button>
<button onclick="next()">
next
</button>
my css
.slider{
min-height:300px;
max-width:400px;
border:1px solid #000;`
}
.container{
background-image:url('http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg');
min-height:300px;
max-width:400px;
}
my jQuery
(function(){
// main image carousel index.html you can customize it ...
var imgSlider = $('#img-slider');
var counter = 0;
var imgSliderContainer = ['http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg','http://www.pycomall.com/images/P1/Natural_Background.jpg','http://www.gochecks.net/data/media/91/Mobile_Nature_Wallpapers_35.jpg'];
function ImageSliderHome(){
imgSlider.fadeOut('5000' ,function(){
imgSlider.css('background-image', "url('" + imgSliderContainer[counter] + "')");
}).fadeIn('5000');
counter++;
if(counter >= imgSliderContainer.length){
counter = 0;
}
}
function prev(){
?
}
function next(){
?
}
setInterval(ImageSliderHome,3000);
})();
What about this?
https://jsfiddle.net/gd2n6paw/12/
$('#next').click(function(){
counter++;
ImageSliderHome();
});
$('#prev').click(function(){
if(counter == 0)
counter = imgSliderContainer.length;
else
counter--;
ImageSliderHome();
});
I've search around and tried my best, but could not find out how to achieve the following:
Loop through an unknown amount of divs
Have some sort of animation (maybe just a simple width growth of 110%)
Each Div fades in/fades out
Delay in between the final div fading out and the first div fading in again
My Current code is as follows
JS Fiddle Link - Example
HTML
<div class="container">
<div class="popup">Popup 1</div>
<div class="popup r">Popup 2</div>
<div class="popup b">Popup 3</div>
<div class="popup g">Popup 4</div>
<div class="popup y">Popup 5</div>
</div>
CSS
.popup {
display: none;
width: 400px;
height: 80px;
background: #000;
color: #fff;
line-height: 80px;
text-align: center;
}
.r{background:red}
.b{background:blue}
.g{background:green}
.y{background:yellow}
jQuery
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length)
i = 0;
$(popups[i]).fadeToggle(300);
i++;
}
setInterval(step, 2000);
As you can see, my divs don't fade out until all are shown, this is not desired.
You can chain together animations with a delay between:
function next() {
if (i >= popups.length)
i = 0;
popups.eq(i).fadeIn(300).delay(2500).fadeOut(300).delay(1000).queue(function(){
next();
$(this).dequeue();
});
i++;
}
next()
(note: I have used popups.eq(i) which is the same as $(popups[i]))
Live example: http://jsfiddle.net/3ujb7k4L/7/
Something like this?
var popups = $('.popup');
var i = 0;
function fadeOutLater(popup) {
setInterval(function() {
popup.fadeOut(500);
}, 5000);
}
function step() {
var popup;
if (i >= popups.length)
i = 0;
popup = $(popups[i]);
popup.fadeIn(300, fadeOutLater(popup));
i++;
}
setInterval(step, 2000);
To create a longer pause between hiding the last element and showing the first element again you could skip one fadeIn/fadeOut cycle on resetting the counter:
var popups = $('.popup');
var i = 0;
function step() {
if (i >= popups.length) {
i = 0;
} else {
$(popups[i]).delay(300).fadeIn(300).delay(200).fadeOut(300).delay(200);
i++;
}
}
setInterval(step, 2000);
Like here: http://jsfiddle.net/r72qpher/
Hi I want to add delay in jquery. I was trying to put $('.fade_test').delay(5000); It is working but div last three is no next to start one.
Link to a jsfiddle
HTML
<div class="fadein">
<div class="fade_test">one <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">two <button id="toggler" class="playin">Pause</button></div>
<div class="fade_test">three <button id="toggler" class="playin">Pause</button></div>
</div>
CSS
.fadein { position:relative; height:332px; width:500px; }
.fadein .fade_test { position:absolute; left:0; top:0; }
JS
var pauseplay;
function startFader() {
$x = $(".fade_test:visible").fadeOut(1000);
$next = $x.next();
if ($next.length == 0)
$next = $(".fade_test:first-child");
$next.fadeIn(1000);
$('.fade_test').delay(5000);
}
function stopFader(){
window.clearInterval(pauseplay);
console.log("stop");
}
$('.fadein .fade_test:gt(0)').hide();
pauseplay= window.setInterval(startFader, 2000);
var $button = $('.fadein #toggler');
$button.toggle(function() {
stopFader();
$(this).toggleClass('playin pausin');
$(this).text("Play");
}, function() {
$(this).toggleClass('pausin playin');
$(this).text("Pause");
pauseplay= window.setInterval(startFader, 2000);
});
Any help would be most appreciated
Not JQuery but you could use Javascript's very simple setTimeout(fn,milliseconds);
here is another post explaining
function foo(){
alert('foo');
}
setTimeout(foo,1000);