I have this script:
<script>
Array.prototype.forEach.call(document.querySelectorAll(".thumbs div"), function ($div) {
$div.style.width = document.querySelectorAll(" img").length * 100 / 4 + "px";
});
document.querySelector("#next").onclick = function () {
var i = 100;
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft += 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
});
};
document.querySelector("#prev").onclick = function () {
var i = 100;
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft -= 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
});
};
</script>
That scrolls the slider thumbs when clicking the next or prev buttons. In Opera and Chrome, it works fine - with one click to the button, .thumbs scrolls 100px. But in Firefox, with one click, it scrolls 1px.
What can I do to fix that?
That's because you aren't passing an interval delay to setInterval, and so Firefox only runs it once. Other browsers seem to take it as if you were passing it 0 (the minimum delay).
Just pass 0 or any value you like, to both of your intervals.
http://jsfiddle.net/ar8au1o6/1/
var intervalId = setInterval(function () {
document.querySelector(".thumbs").scrollLeft += 1;
if (i == 0) {
clearInterval(intervalId);
}
i--;
}, 0); // <-- Set each interval in your code to 0,
// Or any other delay.
// If you set it to 0, the browser will pick the minimum delay.
Related
this is my code
setInterval(this.randomImage, 250);
setInterval(this.randomPosition, 250);
setInterval(this.addImage, 250);
i want to stop addImage function in 5 seconds because images are adding infinitely!
i tried to do it by this way
let timesRun = 0;
const intervalAddImage = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalAddImage)
}
this.addImage();
}, 250);
intervalAddImage();
but it doesn't work...
i am using Vue.js!
The following code runs a task every 250ms and stops after 5sec. I hope this will give you some inspiration.
var intervalId = setInterval(() => console.log("running"), 250);
setTimeout(() => clearInterval(intervalId), 5000);
So it works)
let timesRun = 0; // just change to this
function addImage(timesRun) { console.log(timesRun)}
const intervalAddImage = setInterval(function () {
timesRun += 1; // just change to this
if (timesRun === 4) {
clearInterval(intervalAddImage)
return; // add this
}
addImage(timesRun);
}, 250);
Here is your mistake: do not use this without being careful: you should take time to understand how this works in JavaScript.
In your code, you increment this.timesRun, but you test on timesRun which is never incremented.
This sample will work as you expect:
let timesRun = 0;
//const addImage = this.addImage;
const intervalAddImage = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalAddImage);
}
//addImage();
console.log("Hello", timesRun);
}, 250);
I am trying to fade the volume of an mp3 in to 1 if the body has the class fp-viewing-0
How ever this isn't working and the volume doesn't change how can I fix this?
Code:
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
setInterval( function(){
if ($("body").hasClass("fp-viewing-0")) {
audio0.animate({volume: 1}, 1000);
}
else {
audio0.animate({volume: 0}, 1000);
}
}, 100);
HTML
<audio id="audio-0" src="1.mp3" autoplay="autoplay"></audio>
I've also tried:
$("#audio-0").prop("volume", 0);
setInterval( function(){
if ($("body").hasClass("fp-viewing-0")) {
$("#audio-0").animate({volume: 1}, 3000);
}
else {
$("#audio-0").animate({volume: 0}, 3000);
}
}, 100);
Kind Regards!
I have changed the jquery animate part to a fade made by hand. For that i created a fade time and steps count to manipulate the fade effect.
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
if ($("body").hasClass("fp-viewing-0")) {
audio0.volume = 1; //max volume
var fadeTime = 1500; //in milliseconds
var steps = 150; //increasing makes the fade smoother
var stepTime = fadeTime/steps;
var audioDecrement = audio0.volume/steps;
var timer = setInterval(function(){
audio0.volume -= audioDecrement; //fading out
if (audio0.volume <= 0.03){ //if its already inaudible stop it
audio0.volume = 0;
clearInterval(timer); //clearing the timer so that it doesn't keep getting called
}
}, stepTime);
}
Better would be to place all of this in a function that receives these values a fades accordingly so that it gets organized:
function fadeAudio(audio, fadeTime, steps){
audio.volume = 1; //max
steps = steps || 150; //turning steps into an optional parameter that defaults to 150
var stepTime = fadeTime/steps;
var audioDecrement = audio.volume/steps;
var timer = setInterval(function(){
audio.volume -= audioDecrement;
if (audio.volume <= 0.03){ //if its already inaudible stop it
audio.volume = 0;
clearInterval(timer);
}
}, stepTime);
}
Which would make your code a lot more compact and readable:
var audio0 = document.getElementById('audio-0');
audio0.volume = 0;
if ($("body").hasClass("fp-viewing-0")) {
fadeAudio(audio0, 1500);
}
I have this code:
function CreateAndAnimateEnemyImg() {
var nh = Math.floor(Math.random() * w + 30);
var enemy = document.createElement('img');
enemy.src = 'enemy.jpg';
enemy.className = 'Enemy';
pane.append(enemy);
enemy.onload = function () {
enemy.style.top = nh + 'px';
}
}
$("#Start").click(function () {
var x = setInterval(function () {
CreateAndAnimateEnemyImg();
$('.Enemy').animate({ 'left': '-=20px' });
time--;
}, 20);
if (time == 0) {
timeElapsed = true;
clearInterval(x);
}
});
And this is the jsfiddle
I know my logic is wrong and I want u to help me to fix my problem on click an new image should be created and animated and a a counter should be initialize when the counter is set to 0 the creation of the new images should be stopped but the created images should still animate to left -20px
i have changed the position of the clear interval and adde some condition check
if (time > 0) {
$('.Enemy').animate({ 'left': '-=20px' });
time--;
console.log(time);
if(time == 0){
timeElapsed = true;
clearInterval(x);
}
}
check here Fiddle
Modified the Start click handler little bit. Enemy animate is moved to its own timer and inside the create new enemies interval added check to see if created time reached max.
Here is the new code, updated fiddle demo
$("#Start").click(function () {
intervalPoint = setInterval(function () {
CreateAndAnimateEnemyImg();
time--;
if (time == 0)
StopTimer();
}, 20);
setInterval(function () {
$('.Enemy').animate({ 'left': '-=20px' });
}, 20);
});
function StopTimer(){
timeElapsed = true;
clearInterval(intervalPoint);
time = 3;
}
I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...
Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?
var current = 1;
function autoAdvance() {
if (current == -1) return false;
jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
changeEvery = 10;
}
var itvl = setInterval(function () {
autoAdvance()
}, changeEvery * 1000);
Something like this would work assuming interval is defined in an outer scope:
$('.slideshow img').hover(function() {
interval = clearInterval(interval);
}, function() {
interval = setInterval(flip, 5000);
});
(function () {
var imgs = $('#your_div img'), index = 0, interval,
interval_function = function () {
imgs.eq(index).hide();
index = (index + 1) % imgs.length;
imgs.eq(index).show();
};
imgs.eq(0).show();
interval = setInterval(interval_function, 5000);
$('#your_div').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 5000);
});
}());
Example: http://jsfiddle.net/Zq7KB/3/
I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.
Hope this helps.
Here is the code:
//Mouseover start countdown
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
var interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want to display it.
if (counter == 1) {
//Display 1
$('#login_icon_1').fadeIn();
//Fade in
}
if (counter == 2) {
//Display 2
$('#login_icon_1').fadeOut(750);
//Fade in login icon 2
$('#login_icon_2').fadeIn();
}
if (counter == 3) {
//Display 3
//Display 2
$('#login_icon_2').fadeOut(500);
//Fade in login icon 2
$('#login_icon_3').fadeIn();
}
if (counter == 4) {
//Display 4
//Display 2
$('#login_icon_3').fadeOut(500);
//Fade in login icon 2
$('#login_icon_4').fadeIn();
}
if (counter == 5) {
//Display 2
$('#login_icon_4').fadeOut(500);
//Fade in login icon 2
$('#login_icon_5').fadeIn();
//Display 2
$('#login_icon_5').fadeOut(1000);
}
if (counter == 6) {
counter = 7;
window.location.replace("/wahalu/index.php/login_advisor.php");
}
}, 1000);
}
);
$("#icon_no_1").mouseleave(function()
{
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1').hide();
$('#login_icon_2').hide();
$('#login_icon_3').hide();
$('#login_icon_4').hide();
$('#login_icon_5').hide();
}
);
});
Another way to do it would be to take the variable out of the mouseover so that it can be shared with the mouseleave.
var interval; // <-- is in scope of both events now
$("#icon_no_1").mouseover(function()
{
$(this).fadeTo("slow", 0.23);
//Countdown
var counter = 0;
interval = setInterval(function() {
counter++;
// Display 'counter' wherever you want
// etc etc etc
Now the interval is accessible to mouseleave
$("#icon_no_1").mouseleave(function()
{
counter = 0;
clearInterval( interval )
// etc etc etc
It is not a global variable if you are running your code inside of $(document).ready()
Store the interval with the element, instead of this:
var interval = setInterval(function() {
//code
}, 1000);
Do this:
$.data(this, 'interval', setInterval(function() {
//code
}, 1000));
Then in your mouseleave handler, clear it using clearInterval(), like this:
$("#icon_no_1").mouseleave(function() {
clearInterval($.data(this, 'interval'));
counter = 0;
$(this).fadeTo("slow", 1);
$('#login_icon_1, #login_icon_2, #login_icon_3, #login_icon_4, #login_icon_5').hide();
});
This style of doing timeouts/intervals eliminates the global variables and if needed you can have a timeout/interval per element (instead of a global variable per timeout/interval, per element).