I'm doing an easy slider with buttons, it works fine, but I'd like to add TimeOut() function to current code, to allow slides to change automatically.
I tried to do that with jQuery but it didn't work.
$('.reviews-slider-button').click(function() {
var i = $(this).index();
$('.reviews-slider-person').hide();
$('.reviews-slider-person-' + (i + 1)).show();
});
I'd like to change automatically slider every 10 seconds, and when I would click on .reviews-slider-button it would reset the timer ( to avoid situation I click to change slide, and timer automatically change to the next one).
I'd be grateful for your advice's.
You can use setInterval to click your button every 10 seconds:
var timer = ''; // Make global variable
function ScrollAuto() {
temp = setInterval(function() {
$('.nextButton').click();
}, 10000)
return timer;
}
And to reset your timer, inside your reset button add:
clearInterval(timer);
Similarly to the answer from Shree, but make it cleaner, but use timeout, not interval, you want the system to change slide every 10 seconds unless you click, in which case you reset the timeout, go to the next slide, and set up the next timeout
Something like this:
var slideMaxDuration = 10000; // in ms
var slideTimer = void 0;
function nextSlide() {
clearInterval(slideTimer);
// ... go to next slide ...
}
function autoContinue() {
nextSlide();
setTimeout(autoContinue, slideMaxDuration);
}
$('.reviews-slider-button').click(autoContinue);
You also need to set up the initial autoContinue when you want the whole thing to start.
Related
So I have worked hard to get this code correct thus far. Basically my click event makes my shapes DECAY gradually start being affected. It works perfectly as I wanted. But my question is when I let go of holding down my mouse or finger it automatically jumps back to the original frame. Can I please get some help on how to make it gradually go back (or gradually end) like how it starts? that way its a fluid animation from start to finish.
Here's my Click event code
decaybackup = config.shader.decay;
world.resize()
});
let interval='';
let myshape = document.getElementById('shapeId');
myshape.addEventListener('pointerdown', function(event) {
interval = setInterval(()=>{
config.shader.decay += .001;
},1)
});
myshape.addEventListener('pointerup', function(event) {
config.shader.decay = decaybackup;
clearInterval(interval)
interval = '';
});
also here is a read only link to my site if you need a visual of what im talking about and can also see any code I have added...
enter link description here
THANK YOU!!!
Use setInterval() to decrement decay back to decaybackup similar to the way you increment it during pointerdown.
let undecayInterval;
myshape.addEventListener('pointerup', function(event) {
config.shader.decay = decaybackup;
clearInterval(interval);
clearInterval(undecayInterval);
undecayInterval = setInterval(() => {
config.shader.decay -= 0.001;
if (config.share.decay <= decaybackup) {
clearInterval(undecayInterval);
}, 1);
}
});
Is there any way that I could be able to make a progress bar go backwards? I have seen an example that told me to turn the progress bar 180 degrees, but that seems like a very dirty way to do it. What I'm looking for is so the progress bar can be time controlled, and so that a by pressing a button, I would add three seconds to the timer, thus pulling back the bar a bit (Say the timer is at 7 seconds, pressing the button would add a second, bringing it to 8 seconds thus pulling back the timer a little bit). If I could incorporate this with a countdown timer as well, it would be cool, but not 100% needed. Here is what I have so far. Changes that need to be made is so that the timer goes backwards instead of forwards, and so I could be able to add time on to it by pressing a button.
HTML:
Javascript:
$(document).ready(function(){
var interval = 2, //How much to increase the progressbar per frame
updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
progress = $('progress'),
animator = function(){
progress.val(progress.val()+interval);
$('#val').text(progress.val());
if ( progress.val()+interval < progress.attr('max')){
setTimeout(animator, updatesPerSecond);
} else {
$('#val').text('Done');
progress.val(progress.attr('max'));
}
}
setTimeout(animator, updatesPerSecond);
});
JSFiddle
1st: - We will create a new function for reverse
2nd: - Add min="0" attribute to the progress bar
3rd: - change progress value to 200 progress.val('200'); before running the setTimeout()
Finally: - change + to - on progress.val() - interval
$(document).ready(function(){
var interval = 2, //How much to increase the progressbar per frame
updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
progress = $('progress'),
animator = function(){
progress.val(progress.val()+interval);
$('#val').text(progress.val());
if ( progress.val()+interval < progress.attr('max')){
setTimeout(animator, updatesPerSecond);
} else {
$('#val').text('Done');
progress.val(progress.attr('max'));
}
},
reverse = function(){
progress.val(progress.val() - interval);
$('#val').text(progress.val());
if ( progress.val() - interval > progress.attr('min')){
setTimeout(reverse, updatesPerSecond);
} else {
$('#val').text('Done');
progress.val(progress.attr('min'));
}
}
progress.val('200');
setTimeout(reverse, updatesPerSecond);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress max="200" min="0" value="1"></progress>
<div id="val"></div>
Simply start with progress.val at its maximum, and decrement it. When it gets to 0, you're done.
Good Afternoon All
We've been able to get a basic version of this working with a single time interval in javascript
time = 10000; // 10 Seconds
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 5; })
// figure out correct div to show
.fadeIn(300, "linear"); // and show it
counter++;
if (counter > 5 ){
counter = 1; //Reset Counter
}
}; // function to loop through divs and show correct div
showDiv(); // show first div
setInterval(function(){ showDiv(); }, time); // do this every 10 seconds
});
What I'd like to do is cause the intervals to be different on each of the div times
Like div1 & div2 play for 10 seconds and the others play for 5 seconds
I was able to get the logic working to see if the time had changed based upon which div was displaying but could not get "time" to update from one value to another
I've been reading that using setInterval() does not allow for changing of a variable value once it's been loaded.
There were some suggestions to use setTimeout() but I could not figure it out
Anyone with a suggestion?
Thanks~
Instead of using setInterval you can do the same thing using setTimeout() to call the function again from within itself. This allows determining intervals per instance based on counter
time = 10000; // 10 Seconds
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv() {
// hide all divs, filter current index, and fadeIn
divs.hide().eq(counter).fadeIn(300, "linear");
counter++;
if (counter > 5) {
counter = 1; //Reset Counter
}
// do it again
var delay = counter > 1 ? time / 2 : time
setTimeout(showDiv, delay);
}; // function to loop through divs and show correct div
showDiv(); // show first div
Also streamlined using filter(fn) and replaced with eq()
Correct, the interval for setInterval cannot be changed once it is started. You'll need to use setTimeout to make the interval different each time. The idea is to call setTimeout again in the callback passed to setTimeout, thereby creating a chain of calls. This is a common pattern.
// Different timeouts for each div
var times = [10000, 10000, 5000, 5000, 5000];
var counter = 0;
function showDiv() {
// Show the div immediately
divs.hide().eq(counter).fadeIn(300, 'linear');
// Cycle the counter
counter = (counter + 1) % divs.length;
// Set the delay for the next callback
setTimeout(showDiv, times[counter]);
}
// Start the chain of calls
showDiv();
A hearty thank you and a brewski to both...
I ended up taking the best of both and here's what I'm now using
<script type="text/javascript">
$(function () {
// Different timeouts for each div
var times = [30000, 30000, 10000, 10000, 5000];
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv() {
// hide all divs, filter current index, and fadeIn
divs.hide().eq(counter).fadeIn(300, "linear");
// set time out duration from array of times
setTimeout(showDiv, times[counter]);
// cycle the counter
counter = (counter + 1) % divs.length;
};
showDiv(); // show first div
});
</script>
I know there has been many topics on Javascript Timers however, my timers are in effect "Doubling" every time my mouse hovers over a div to call a command, they are not consistent.The divs below show the onmouseover event which calls the functions.
<div id="Team_Container2"><div id="Image1" onmouseover="area_hover1(this);area_hover2(this)"></div>
<div id="Team_Container2"><div id="Image2" onmouseover="area_hover1(this);area_hover2(this)"></div>
function area_hover1(obj) {
var interval;
clearInterval(interval);
href = $(obj).attr('href');
url = href.split('#');
url1 = url[1];
interval = setInterval(function() {setAreaOver(document.getElementById(url1), 'Seating_Plan_Image_canvas', '0,0,0', '0,0,0', '0.33', 0, 0, 0);}, 1000);
return;
}
function area_hover2(obj) {
var interval;
href = $(obj).attr('href');
url = href.split('#');
url1 = url[1];
clearInterval(interval);
interval = setInterval(function() {setAreaOver(document.getElementById(url1), 'Seating_Plan_Image_canvas', '0,0,0', '0,0,0', '0.0', 0, 0, 0);}, 2000);
return;
}
How could i adjust the timer or merge the two functions into one and perform one "setInterval" after the other one.
I need the area_hover2 set Interval to come like 500 milliseconds after the first Area_hover1 set interval if that makes sense.
Any help would be most appreciated!
Thanks
Aj
Every time you hover over your image, you kick off a new setInterval, since your clearInterval() command isn't really doing anything. You defined the variable holding the setInterval() pointer inside the hover function, so as soon as it exits, that variable is gone. What you need is:
var interval; // Defined in global scope
function area_hover1(obj) {
clearInterval(interval); // Abort any existing hover interval
// Set up variables
interval = setInterval(function() { /* doStuff */ }, 1000);
}
You may also need to capture the onMouseOut event to stop the interval as well, since right now it will keep running even after the mouse is no longer hovering over the element.
I have built a basic content slider, based upon a tutorial I got from the web.
In the example, the slides scroll on a timed interval using a setTimeout parameter, but also has a navigation functionality (of course) which allows you to go to selected slides directly.
The slides scroll without pausing the Timeout when a slide is selected and obviously when the mouse hovers.
The key javaScript/jQuery code which controls the scrolling is essentially (7 total slides):
var currentSlide = 0;
function slideScroll(){
if (currentSlide == 7)
selectSlide(1);
else
selectSlide( currentSlide + 1 );
setTimeout ('slideScroll()', 4000);
}
((Other javaScript code omitted because I was fairly certain that the key is this function, but I can certainly update my question with the precursory code if needed for clarity.))
The end game is a) to have the Timeout reset whenever a user selects a new slide and b) to have the Timeout pause when a mouse is rolled over the content in the slide.
I presume that the code ought to be inserted in conjunction with the setTimeout, with some if statements or something. Can someone help me devise this solution for endgame a) and b) ?
Live prototype and NOT a shameless plug: HERE
Thanks in advance for tips!
add a check for paused and a variable to hold the timer reference
var currentSlide = 0,
paused = 0,
timer;
function slideScroll () {
if (paused) {/* action if paused or leave blank*/}
else if (currentSlide === 7) selectSlide(1);
else selectSlide(currentSlide + 1);
timer = setTimeout(slideScroll, 4000);
}
Then in the choose slide click
clearTimeout(timer);
timer = setTimeout(slideScroll, 4000);
Then in mouseover
paused = 1;
and mouseout
pause = 0;
Alternatively, use a shorter timeout which does almost nothing most times it's invoked
var currentSlide = 0,
paused = 0,
remain = 4000;
function slideScroll () {
if (!paused) {
if (remain > 0) remain -= 200;
else {
remain = 4000;
if (currentSlide === 7) selectSlide(1);
else selectSlide(currentSlide + 1);
}
}
setTimeout(slideScroll, 200);
}
Then in the choose slide click
remain = 4000;
Same as before for mouseover and mouseout