<script type="text/javascript">
var images=["cod.jpg","cod2.jpg","cod3.jpg","cod4.jpg"];
var i=0;
window.onload=function(){
changeimage();
var stopinterval = setInterval(changeimage,3000);
}
function changeimage(){
if(i==images.length||i>images.length){
i=0;
}
document.getElementById('metroslider').src=images[i];
i++;
}
function stopanim(){
clearInterval(stopinterval);
}
</script>
**body is below **
<div class="sliderbtns" onMouseMove="stopanim();">
But its not working please help me how to stop the interval using On mousOver function .
Thanks .
var images = ["cod.jpg", "cod2.jpg", "cod3.jpg", "cod4.jpg"];
var i = 0;
var stopinterval;
window.onload = function() {
changeimage();
stopinterval = setInterval(changeimage, 333);
}
function changeimage() {
document.querySelector('div').innerHTML = i;
i++;
}
function startAnim() {
if (stopinterval === null) {
stopinterval = setInterval(changeimage, 333);
}
}
function stopanim() {
if (stopinterval) {
clearInterval(stopinterval);
stopinterval = null;
}
}
<div onmouseover="stopanim()" onmouseout="startAnim()">mouse over to stop</div>
Related
Hello i've script which changes me text colors on interval, there is:
<script>
const txts=document.querySelector(".animate-text").children,
txtsLen=txts.length;
let index=0;
const textInTimer=3500,
textOutTimer=3300;
function animateText() {
for(let i=0; i<txtsLen; i++){
txts[i].classList.remove("text-in","text-out");
}
txts[index].classList.add("text-in");
setTimeout(function(){
},textOutTimer)
setTimeout(function(){
},textInTimer);
}
window.onload=animateText;
</script>
<script>
var i = 0;
function changeClass(){
setTimeout(function() {
txts[index].classList.add("text-out");
if(index == txtsLen-1){
index=0;
}
else{
index++;
}
animateText();
$("#animate-button").removeClass("anim" + i)
i = (i==4)?1:i+1;
$("#animate-button").addClass("anim" + (i));
}, 300)
}
setInterval(changeClass, 3500);
windows.onload=changeClass;
</script>
I need to know how can i force to start over this script after switch back to my page.
So next script for restart looks:
<script>
document.addEventListener("visibilitychange", function() {
if (document.hidden){
console.log("Browser tab is hidden")
} else {
console.log("Browser tab is visible")
//Resetowanie slidera
jQuery('#carouselExampleControls').carousel(0);
console.log('Slider został przywrócony do 1 slajdu');
// start over changeClass function here
console.log('Funkcja changeClass zaczęła działać od początku');
}
});
</script>
I need to start over changeClass() function and put it below the comment in last script
I want to transform this code from JavaScript into jQuery.
This is the current code:
var i = 0;
var start = true;
document.getElementById("startclick").addEventListener("click", function() {
if (start) {
start = false;
interval = setInterval(function() {
i++;
document.getElementById('list').innerHTML += "albastru_" + i + '<br>' ;
}, 3000);
} else {
start = true;
clearInterval(interval);
}
});
Here is my attempt:
$x = 0;
$start = true;
$(document).ready(function () {
$('#buton2').on('click',function () {
if($start){
$start = false;
$interval = setInterval(function () {
$x ++;
$('#list').html('<p>albastru_</p>' + $x + '<br>'); }, 1000);
} else {
$start = true;
clearInterval($interval);
}
})
});
You can do something like below. I'm assuming startclick is a button, after you click it .append() will add the required data to #list div after 3 seconds.
Updated Answer with start and stop buttons.
var i = 0;
var start = true;
var interval = null;
$('#startclick').click(function() {
if (interval !== null) return;
interval = setInterval(function() {
i++;
$('#list').append("albastru_" + i + '<br>');
}, 3000);
});
$("#stop").click(function() {
clearInterval(interval);
interval = null;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="list">
</div>
<br />
<button id="startclick">START!</button>
<button id="stop">STOP!</button>
I have a jQuery function
setInterval(function () {
secondPlay()
}, 1000);
setInterval(function () {
secondPlay1()
}, 1000);
function secondPlay() {
$("body").removeClass("play");
var aa = $("ul.secondPlay li.active");
var ii = $('ul.secondPlay li:last-child').val();
if (aa.html() == undefined) {
aa = $("ul.secondPlay li").eq(0);
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play");
}
if (aa.is(":last-child")) {
$("ul.secondPlay li").removeClass("before");
aa.addClass("before").removeClass("active");
aa = $("ul.secondPlay li").eq(0);
aa.addClass("active")
.closest("body")
.addClass("play");
}
else {
$("ul.secondPlay li").removeClass("before");
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play");
}
}
I want to run this function for 15 times. How can I run it ?
Declare a variable as a counter. Increment that variable eachtime you calling the function. If the variable reaches 15, the stop the setInterval() by using clearInterval() function
var counter = 1;
var interval = setInterval(function () {
if (counter == 15) {
clearInterval(interval);
}
secondPlay()
counter++;
}, 1000);
You can use following code as reference.
(function(){
var count = 0;
var interval = setInterval(function(){
if(count>15){
window.crearInterval(interval);
}
else{
document.getElementById("lblCount").innerHTML = count;
count++;
}
},1000);
})()
<p id="lblCount"></p>
Try This
var timePlyed = 0;
function secondPlay() {
timePlyed++;
console.log(timePlyed);
if (timePlyed != 15) {
secondPlay();
}
}
secondPlay();
Enclose them in a for loop?
for (i = 0; i < 15; i++) {
...
}
you can use timeout function:
function secondPlay(i){
console.log(i);
}
function test(){
for(var i = 0; i < 15; i++){
setTimeout(function(){
secondPlay(i);
}, i * 1000);
}
}
call test() to execute the function.
Instead of setInterval, you could use a timeout:
var i = 0;
function secondPlay1() {
// do function
setTimeout(function() {
if (i < 15) {
i++;
secondPlay1();
}
}, 1000);
}
Hi I have problem with my slider please visit this site and check
http://paruyr.bl.ee/
after click on my arrows it becomes work in an asynchronous way, ones it changes very fast and then slow and it repeats. I think it is from start slider() and stop slider(). set and clear interval
var sliderPrev = 0,
sliderNext = 1;
$("#slider > img").fadeIn(1000);
startSlider();
function startSlider(){
count = $("#slider > img").size();
loop = setInterval(function(){
if (sliderNext>(count-1)) {
sliderNext = 0;
sliderPrev = 0;
};
$("#slider").animate({left:+(-sliderNext)*100+'%'},900);
sliderPrev = sliderNext;
sliderNext=sliderNext+1;
},6000)
}
function prev () {
var newSlide=sliderPrev-1;
showSlide(newSlide);
}
function next () {
var newSlide=sliderPrev+1;
showSlide(sliderNext);
}
function stopLoop () {
window.clearInterval(loop);
}
function showSlide(id) {
stopLoop();
if (id>(count-1)) {
id = 0;
} else if(id<0){
id=count-1;
}
$("#slider").animate({left:+(-id)*100+'%'},900);
sliderPrev = id;
sliderNext=id+1;
startSlider();
};
$("#slider, .arrows").hover(function() {
stopLoop()
}, function() {
startSlider()
});
function onlyNext () {
var newSlide=sliderPrev+1;
onlyShowSlide(newSlide);
}
function onlyShowSlide(id) {
if (id>(count-1)) {
id = 0;
} else if(id<0){
id=count-1;
}
$("#slider").animate({left:+(-id)*100+'%'},900);
sliderPrev = id;
sliderNext=id+1;
};
Try deleting all stopLoop calls and put it in the starSlider function
function startSlider(){
count = $("#slider > img").size();
stopLoop();
loop = setInterval(function(){
if (sliderNext>(count-1)) {
sliderNext = 0;
sliderPrev = 0;
};
$("#slider").animate({left:+(-sliderNext)*100+'%'},900);
sliderPrev = sliderNext;
sliderNext=sliderNext+1;
},6000)
}
So I have this script that is a counter that follows an infinite animation. The counter resets to 0 everytime an interation finishes. On the line fourth from the bottom I am trying to invoke a x.classList.toggle() to change css when the counter hits 20. When I replace the classList.toggle with an alert() function it works, but as is no class 'doton' is added to 'dot1'. What am I missing?
http://jsfiddle.net/8TVn5/
window.onload = function () {
var currentPercent = 0;
var showPercent = window.setInterval(function() {
$('#dot1').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function (e) {
currentPercent= 0;});
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
if (currentPercent == 20){document.getElementByID('dot1').classList.toggle('doton');}
document.getElementById('result').innerHTML = currentPercent;
}, 200);
};
I't just a typo: its should be getElementById.
http://jsfiddle.net/8TVn5/1/
Why are you mixing jQuery and normal selectors?
window.onload = function () {
var currentPercent = 0,
dot1 = $('#dot1');
var showPercent = window.setInterval(function() {
dot1.on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration',
function (e) {
currentPercent= 0;
}
);
if (currentPercent < 100) {
currentPercent += 1;
} else {
currentPercent = 0;
}
if (currentPercent === 20){
dot1.toggleClass('doton');
}
$('#result').html(currentPercent);
}, 200);
};