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);
};
Related
i have this function that prints every letter from array.
here is a link to jsFiddle:
https://jsfiddle.net/yaroslav_cherednikov/ypbuhmqv/71/
it works well on the first run but then skips the first element in array on the second run
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function lettersPrint(word) {
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count++;
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
else{
window.count = 0;
aLoop();
}
}
aLoop();
}, 1000);
.typer-txt {
font-size: 2vw;
color: #378bd8;
display: inline-block;
}
#cursor {
float: right;
color: #b9b9b9;
animation: pulse 0.5s infinite;
visibility: hidden;
}
#out {
display: inline;
}
.selected {
background-color: #378bd8;
color: white;
}
#-webkit-keyframes h1-slide-up {
0% {top:100px; opacity: 0;}
100% {top:0px; opacity: 1;}
}
#keyframes pulse {
0% {
opacity: 0
}
100% {
opacity: 1;
}
}
<div class="typer-txt remove" id="typer-txt"><span id="cursor">|</span><div id="out" class=""></div></div>
this is first time i deal with a recursive function so i might have messed something. any help would be much appreciated.
You are not resetting the word count when you are on the last word. I've updated your code and refactored the highlight and erase portion into its own function
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
debugger;
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function highlightAndErase(winCount) {
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count = winCount
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
function lettersPrint(word) {
// previously was being missed after the last word due to the word_count not being reset
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
highlightAndErase(++window.count)
}
else{
// previously was not resetting the word_count var
highlightAndErase(0)
}
}
aLoop();
}, 1000);
Two problems:
You need a window.word_count = 0 next to window.count = 0 at line 38.
I believe word_count at line 30 needs to be window.word_count.
This will fix the skipped array item, but will introduce a new problem, which I'm sure you'll notice. I'll leave solving that item up to you.
You should have to reset some things in the else clause:
var a = ["Saab", "Volvo", "BMW", "renault"];
var d = document.getElementById('out');
var c = document.getElementById("cursor");
window.count = 0;
window.word_count = 0;
setTimeout(function () {
c.style.visibility = 'visible';
function aLoop() {
setTimeout(function () {
if(window.count < a.length){
return lettersPrint(a[window.count]);
}
}, 50);
}
function lettersPrint(word) {
if (window.word_count < word.length) {
setTimeout(function () {
d.innerHTML += word[window.word_count];
window.word_count++;
return lettersPrint(word);
}, 100);
}
else if( window.count < (a.length - 1) ){
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function () {
window.count++;
word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
return aLoop();
}, 2000);
}
else{
setTimeout(function () {
d.classList.add("selected");
}, 1000);
setTimeout(function(){
window.count = 0;
window.word_count = 0;
d.classList.remove("selected");
d.innerHTML = '';
aLoop();
}, 2000)
}
}
aLoop();
}, 1000);
Try to separate things in functions to understand better what you are doing! Sometimes recursive things are kinda messy if you don't separate and name things
The code is meant to animated some text in a typing fashion. I want it to run once, but it keeps looping through the area of sentences. How would i go about stopping it looping through. The top of the code gathers the value of a input and puts into the array, this all works fine. It is just the looping i am having issues with.
var yourWord = document.getElementById("myText").value;
var yourtext = "I took the word " + yourWord + "...";
var infomation = [yourtext,
'I looked at the most relevant news article relating to it...',
'And created this piece of art from the words in the article! '
],
part,
i = 0,
offset = 0,
pollyLen = Polly.length,
forwards = true,
skip_count = 0,
skip_delay = 5,
speed = 100;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= infomation[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
} else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= pollyLen) {
i = 0;
}
}
}
part = infomation[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
} else {
offset--;
}
}
$('#pollyInfo').text(part);
}, speed);
};
$(document).ready(function () {
wordflick();
});
Modify the line:
setInterval(function () {
into:
var interval = setInterval(function () {
and then clear the interval where you are setting i=0;
if (i >= pollyLen) {
i = 0;
}
to:
if (i >= pollyLen) {
i = 0;
clearInterval(interval);
}
This should do the job!
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)
}
ok, the following code works ok in IE7+ and Chrome.
but for some reason, xfade is undefined in firefox
<html>
<body>
<div id="slider"></div>
<script type="text/javascript">
var Klimateka = {
Slider: function () {
// Check if we have a slider div on page
var slider = document.getElementById('slider');
if (slider != null) {
var images = ["slide-image-1.jpg", "slide-image-2.jpg", "slide-image-3.jpg", "slide-image-4.jpg"];
var i = images.length;
while (i) {
i -= 1;
var img = document.createElement("img");
img.src = "images/" + images[i];
slider.appendChild(img);
}
var d = document, imgs = new Array(), zInterval = null, current = 0, pause = false;
imgs = d.getElementById("slider").getElementsByTagName("img");
for (i = 1; i < imgs.length; i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout("xfade()", 3500);
function xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current + 1] ? current + 1 : 0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity -= .05;
nOpacity += .05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if (cOpacity <= 0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(xfade, 3500);
} else {
setTimeout(xfade, 50);
}
function setOpacity(obj) {
if (obj.xOpacity > .99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity * 100) + ")";
}
}
}
},
bar: function () {
}
};
Klimateka.Slider();
i have setup a jsfiddler for testing:
http://jsfiddle.net/rTtKh/10/
This might only apply to Firefox:
functions do not hoist when declared inside a child block.
You declare xfade inside the if block, but you are calling it prior to the declaration:
setTimeout(xfade, 3500);
Put the function declaration on top.
You have to do the same with setOpacity inside xfade. <- That is not necessary.
Fix your line that says this: setTimeout("xfade()", 3500); to match your others:
setTimeout(xfade, 3500);
Use setTimeout(xfade, 3500) instead.