What I'm trying to accomplish is a slideshow that has one slide that lasts 10 seconds-- while all other slides in the slideshow last 4 seconds. In my code below, the current.id==1 condition is my first slide. When the DOM loads, it checks what slide is first, and if it's current.id==1, it makes all transitions 10 seconds. Which isn't exactly what I want. Any suggestions how I could get the all other slides to interval every 4 seconds and still keep my main slide lasting 10 seconds every time it flips back to that slide?
Sorry if that is a bit confusing. Thanks for the help guys!
/* Setting auto-advance every 10 seconds for main slide, 4 seconds for all others */
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setInterval(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setInterval(function(){
next();
},4*1000);//4 seconds each other slide.
}
I write my JS like this. It makes it far more readable in my opinion and really helps Though normally I don't include comments like this
Your next() function should call itself
$(document).ready(function () {
var Page = {};
Page.slider = (function () {
return {
init: function () {
setTimeout(function () {
Page.slider.nextSlide();
}, 10*1000);
},
nextSlide: function () {
var duration = 4;
if (Page.slider.isShowingFirst()) {
duration = 10;
}
//code to handle transitioning slides
setTimeout(function () {
Page.slider.nextSlide();
}, duration*1000);
},
isShowingFirst: function () {
//return boolean on whether it's showing the first slide or not
}
}
})();
Page.slider.init();
});
You can't use setInterval() if you want a varying interval because you only call it once and then it runs repeatedly with the same interval until you stop it. You could use setTimeout() on each slide like this:
if (current.id == 1) { //this is the only slide I want lasting 10 seconds.
setTimeout(next, 10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
setTimeout(next, 4*1000);//4 seconds each other slide.
}
P.S. You may also want to notice that you don't need an anonymous function for setTimeout() or setInterval() if all you want it to do is call a function you already have defined as in this example.
You should use setTimeout instead of setInterval.
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setTimeout(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setTimeout(function(){
next();
},4*1000);//4 seconds each other slide.
}
Related
<div class="popup_div">Form here</div>
What I am doing is to make this "div" popup when the page loads after 5 seconds, then when the user closes the popup div it will count again to 15 seconds to appear again, then when the user closes it again it will show for another 30 seconds
This is the interval
5 secs (on page load)
15 secs
30 secs (final popup, it won't popup after this)
Here is My fiddle, hope this helps
https://jsfiddle.net/3xk725ts/
Here I wrote a solution using setTimeout instead of setInterval so you don't need to take care about clearing it.
var iteration = 0;
var times = [5000, 15000, 30000]
var showPopUp = function(time) {
setTimeout(function() {
$('#timer').show();
$('#timer').html("<span class='close'>X</span><h3>Count down complete</h3>"); }, time)
}
showPopUp(times[iteration]);
$('body').on('click', '.close', function() {
$('#timer').hide();
iteration +=1;
if (iteration < 3) {
showPopUp(times[iteration])
}
});
Will try to explain what I'm trying to do here. I have 2 logos and i want toggle 1 class after every setTimeout function "show" For some reason resetting the timeOut is not working properly.
The first function is fired after 5 seconds and the second function is fired after 8 seconds. I want to reset these because I don't want the function to be fired before the correct "X" amount of seconds is done.
let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');
function firstLogo() {
console.log('First logo');
logo1.classList.add('show');
logo2.classList.remove('show');
setTimeout(firstLogo, 5000);
}
function secondLogo() {
console.log('Second logo');
logo1.classList.remove('show');
logo2.classList.add('show');
setTimeout(secondLogo, 8000);
}
setTimeout(firstLogo, 8000);
setTimeout(secondLogo, 5000);
Can someone help?
You can use something like this:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
The clearTimeout will prevent the function set with the setTimeout() to execute.
Hope this helps.
You will get some strange interactions between the timeouts, e.g.
At the start, timers will be set for 5 and 8 seconds
At 5 seconds:
logo1 will be shown
logo 2 will be hidden
the function will run in another 5 seconds
At 8 seconds:
logo 2 will be shown
logo 1 will be hidden
the function is set to run again in 8 seconds
At 10 seconds, the first function runs again so logo 1 is shown
At 15 seconds, the first function runs again, logo 1 is alreay shown
At 16 seconds, the second function runs again, logo 2 is shown
At 20 seconds, the first function runs again, logo 1 is shown
At 24 second, the second function runs again, logo 2 is shown
At 25 seconds, the first function runs again, logo 1 is shown
At 30 seconds, the first function runs again, logo 1 is alreay shown
At 32 second, the second function runs again, logo 2 is shown
and so on…
Perhaps you want logo 2 shown for 5 seconds, then logo 1 for 3 seconds, then logo 2 for 5 seconds, etc.
In that case, you can call one function from the other, using appropriate settings for setTimeout. Since the default is to display the logos, I've changed show to hide, e.g.
let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');
function firstLogo() {
console.log('Hiding first logo');
logo1.classList.toggle('hide');
logo2.classList.toggle('hide');
setTimeout(secondLogo, 3000);
}
function secondLogo() {
console.log('Hiding second logo');
logo1.classList.toggle('hide');
logo2.classList.toggle('hide');
setTimeout(firstLogo, 5000);
}
firstLogo();
.hide {
display: none;
}
<span class="logo-1">logo 1</span><span class="logo-2 hide">logo 2</span>
Trying to implement a count down timer, so once I navigate to each screen the timer should reset.
So for each every minute the timer should automatically initialize and starts the count down from 10 to 0.
If user interupts in the middle of count down it should be in the same page, else it should navigate to home page.
This is what I have tried. My timer is calling only once and how do I know that the page has been changed and reset the timer to calulate from 1 minute.
JS:
$(document).ready(function() {
// Function to update counters on all elements with class counter
var doUpdate = function() {
$('.countdown').each(function() {
var count = parseInt($(this).html());
if (count !== 0) {
$(this).html(count - 1);
}
});
};
// Schedule the update to happen once every second
setInterval(doUpdate, 1000);
});
HTML:
<div class="countdown">10</div>
Once you have reached 0 on your countdown you could clear your current intervals using clearInterval() and restart the whole process after a minute. You could have another setInterval() which does this every minute.
Here is a fiddle which resets counters every 12 seconds: http://jsfiddle.net/uo7jLf4b/1/
I made a website where I need to animate strings that are longer than the containing parent.
This is the website: Here
If you click on next, you can see multiple pages of breeders with long names, that need to animate from left to right, but this only happens after 10 or 15 seconds and it takes a long time for it to start.
Now I have checked my code and this is where I create my functions:
function newsTicker() {
console.log('newsTicker')
verifyLength();
$('.breeder').not('.short-breed-name').each(function() {
var breederNameWidth = $(this).find('.breeder_name').width();
var divBreederNameWidth = $(this).find('.breeder_name_div').width();
var diff = Math.max(parseInt(breederNameWidth - divBreederNameWidth),0);
// console.log('diff:',diff)
$(this).find('.breeder_name').animate({
marginLeft: -diff
}, 3000,
function(){
$(this).animate({
marginLeft : 0
},3000)
})
})
}
function verifyLength() {
// console.log('verifyLength')
$('.breeder.visible').each(function() {
// debugger
var breederNameWidth = $(this).find('.breeder_name').width() + 10;
var divBreederNameWidth = $(this).find('.breeder_name_div').innerWidth();
if(breederNameWidth < divBreederNameWidth) {
$(this).addClass('short-breed-name');
$(this).find('.breeder_name').css({'width':'100%','text-align':'center'})
}
})
}
And this is where I call newsTicker:
function breederAnimate(){
verifyLength();
newsTicker();
setInterval(newsTicker, 1000);
}
Why is it so slow when my times are between 1 and 3 seconds?
You should be calling setTimeout not setInterval because you only want your animation to run once. You're restarting your animations every second
Also, you should be cancelling existing setIntervals when you click next or previous
Ok so , i'm trying to build a custom slideshow with javascript, but i would like to put a custom pause interval for each slide .
let's say i have a slideshow with 3 slides i want it to be like :
30 seconds 8 sec 8 sec
|-------------------|------|-------|
slide 1 slide2 slide3
I want to be able to give a function a list of intervals [5 , 10 , 20] and shuffles a list of slides using that interval list.
I did try to solve this using setInterval with fun , but unfortunately it'sctions calling the next function but as you know it's not scalable to many slides,
Code
// slid is a class having all slides
function bringback() {
slid.goToSlide(0);
}
function bringback2() {
slid.goToSlide(2);
setTimeout( bringback, 8000 );
}
$(document).ready(function(){
setInterval(function(){
slid.goToSlide(1);
setTimeout( bringback2, 8000 );
}, 30000);
});
Use setTimeout:
;(function(){
var intervals = [5,10,20];
(function update(next){
// Pick a slide and update the slideshow here
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();
Demo
You could make it choose a random slide or just iterate through the slides in order, like so:
;(function(){
var intervals = [5,10,20];
(function update(next){
slid.goToSlide(next);
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();