Actually , i'm designing an autoplay slider using vanilla javascript . so there are two functions , one will play the forward slider while other reverse . When i'm on the last item in the forwardslider , i want to clear the interval and start the reverse slider and vice versa when im on the reverse slider's last item , i want to clear the interval and start the forward slider . But the intervals are not being cleared and once it switches to the reverse slider and keeps on running both the intervals
function sliderForwardAutoplay(){
var Fid = setInterval(()=>{
var currentSlider = document.querySelector('.current-slider');
if(parseInt(currentSlider.dataset.num)===2){
clearInterval(Fid);
sliderReverseAutoplay();
}
// alert(currentSlider.dataset.num+1);
// currentSlider.classList.add('swipe-left');
getSliderLayer(parseInt(currentSlider.dataset.num)+1).classList.add('swipe','current-slider');
setInterval(()=>{
getImgLayer(parseInt(currentSlider.dataset.num)+1).classList.add('left-0');
},500);
currentSlider.classList.remove('current-slider');
},5000);
}
function sliderReverseAutoplay(){
var Rid = setInterval(()=>{
var currentSlider = document.querySelector('.current-slider');
if(parseInt(currentSlider.dataset.num)===0){
clearInterval(Rid);
sliderForwardAutoplay();
}
// alert(currentSlider.dataset.num+1);
// currentSlider.classList.add('swipe-left');
getSliderLayer(parseInt(currentSlider.dataset.num)).classList.add('swipe-right');
getSliderLayer(parseInt(currentSlider.dataset.num)-1).classList.add('current-slider'); currentSlider.classList.remove('current-slider');
},5000);
}
Related
I am currently modifying this piece of code as apart of a project, it works fine for what I need it to do, however I want a relatively short transition period,but the initial div element only display for a brief moment and the fade process starts.
I was wondering if anyone could help me to correct this. Ideally I would like to set the initial slider timeframe or delay it from triggering the process,
var divs = $('.fade');
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
current.stop().fadeOut(500, function() {
$(this).removeClass('current');
setTimeout(fade, 5000);
});
next.stop().fadeIn(500, function() {
$(this).addClass('current');
});
}
fade();
To delay the function fade() from starting right away just do:
var divs = $('.fade');
function fade() {
....
}
setTimeout(fade, 5000); //here is the only change
At the end of your code fade() is executed right away. Just add a timeout to it. 5000 is in milliseconds, just switch that to the delay time you want.
Apart from your question, if you wanted to apply the fade function to objects only after you clicked them, you could do this.
$('.fade').on('click',function(){//instead of click you could use any event ex. mouseover
fade();//call fade function
});
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/
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);
})();
I recently modified the SquareSlider (http://gilbert.pellegrom.me/recreating-the-square-slider) so that a client could have an AutoRotator on their promos, along with this they wanted the rotator to stop if somebody was hovering over it. By default the scroller rotates every 4 seconds.
// Automatic Rotation
var autoScroller = function(){
slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');
};
// Pause the Rotation on Hover, resume when not hovering
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
However, after adding in the pause-on-hover it no longer autorotates when the page loads, in order to trigger the rotating you have to hover over the slider first. Any help would be greatly appreciated in getting it to AutoRotate on pageload instead of having to hover first.
Here's a link to a jsFiddle where I have recreated it.
If you load the page no autoRotating will happen until you hover over the slider first.
http://jsfiddle.net/dylanbaumann/RSP2z/
Two things:
1) Need to initialize the timer. Abraham had this one.
2) Right now your hover will affect all slideshows on the same page.
//declare the timer
var timer = setInterval( autoScroller, 4000);
//use the already defined slider variable instead of selecting all sliders
slider.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval( autoScroller, 4000);
});
you can do
var timer = setInterval( autoScroller, 4000);
// BELOW THIS COMMENT IS THE ISSUE
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
http://jsfiddle.net/RSP2z/6/
You have to define timer before clearing it. i.e. var timer = setInterval(autoScroller,4000);
Hope this helps.
I am using the YouTube API to get the current elapsed time of a video: player.getCurrentTime(); and the player.getDuration(); functions; I have set a slider in jQuery that will have the max value set to player.getDuration and the min to 0;
Using those two functions I have built the following piece of code:
var progress = setInterval(function(){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
},1000);
that will update a slider with the elapsed time of the Youtube video.
The problem is that when I pause the video, the value of the slider flickers between an earlier value, and the current elapsed time (player.getCurrentTime()) value.
Can someone explain?
EDIT: here is the proper code that updates the slider on player play state and stops the update function on player pause state:
function playerStateChange(newState) {
globalYtState = newState;
if(newState == 0){
$("#hSongSearcher").val('').trigger('keyup');
setTimeout(playNextVideo(),1500);
}
if(newState == 2){
clearInterval(progressUpdater);
}
if(newState == 1){
progressUpdater = setInterval(function(){
//console.log(Math.floor(player.getCurrentTime()));
if(Math.floor($("#progressbar").slider('value')) != Math.floor(player.getCurrentTime())){
$("#progressbar").slider({value: Math.floor(player.getCurrentTime())});
}
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}
}
So, this may help anyone else. I have found out that when running this piece of code:
$("progressbar").on('slidechange',function(event,ui) { ...
it seems that the ui.value flickers in my example between the current getCurrentTime() value and a maybe random value? ( I don't know exactly from where that value is! but I know a good workaround that will fix that);
SO I have made a var that holds the player current time on each second, and just pass by that random flickering value of the slider as follows:
if(newState == 1){
progressUpdater = setInterval(function(){
ctime = Math.floor(player.getCurrentTime());
$("#progressbar").slider("value", ctime);
//Here starts the flickering fix
$("#progressbar").on('slidechange',function(event,ui){
//Fix Flcikering;
if(ui.value < ctime){
$("#progressbar").slider("value", ctime);
}
});
//And here it ends.
$('.current_elapsed').html(getPropperDuration(Math.floor(player.getCurrentTime())));
},1000);
}