My code below needs to put in a setInterval within a for loop. I basically need to put in a 10 second pause between the next iteration of the for loop. This is for a very basic script which shows banners in a div for 10 seconds before moving onto the next one. It existing setInterval is code I got off another website as I ran out of options. Any help? And if you don't mind explaining the logic to me so that I know for the future :)
$("document").ready(function() {
// bannerChange
function bannerChange(banner,div,milliseconds) {
var length = banner.length;
for(i=0;i<length;i++) {
(function(i) {
setInterval(function() {
var url = banners[i].url;
var img = banners[i].image;
$("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
},milliseconds)
})(i);
}
}
function showBanner(bannerName, bannerDiv, milliseconds) {
var url = "www/scripts/ajax/getBanners.php";
$.post(url, {name: bannerName}, function(data) {
if(data.response == true) {
bannerChange(data.banners,bannerDiv,milliseconds);
}
});
}
// Run banners
showBanner("Test Banner","test",10000);
});
Here's an updated version based on the comment:
// Start by getting the banners:
var banners = [];
var currentBanner;
function getBannersFromServer(...) {
// TODO: make ajax call to server for banners
// push the banners into a queue for later
for (var i in bannerFromServer) {
banners.push(bannersFromServer[i]);
}
}
// Then run through them:
function showNextBanner() {
// advance to next banner
currentBanner++
// go back to the beginning after the last banner is displayed
if(currentBanner >= banners.length) currentBanner = 0;
// pull a banner out of the queue
var banner = banners[currentBanner];
// TODO: Show the banner in the div
// do it again in 10 seconds
showNextBanner();
}
// start it all
getBannersFromServer();
getNextBanner();
Try using:
.delay()
Here is a great example of this function in use!
Try this
var i=0;//Global Variable
function bannerChange(banner, div, milliseconds) {
var length = banner.length;
setInterval(function() {
var url = banners[i].url;
var img = banners[i].image;
$("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
i++;
if(i >= length) i=0;//To reiterate from first
},milliseconds);
}
Hope this solves your problem.
Related
And thanks for stopping by.
I've been trying to add a feature, or function, to a project that I'm working on, but I just can't wrap my head around it.
When my project loads I want the user to activate the time as soon as they move, or click, one of the orbs -- not as soon as the project loads. I know there's an onClick or click event, but I'm having trouble implementing it on the js code. I've gone as far as commenting-out or "greying" entire functions to test things out.
Here's some of the time code:
function clockStart() {
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
function rewindSec(seconds) {
if (seconds) {
clearInterval(seconds);
}
}
gameStart();
// GAMES BEGIN!!!
function gameStart() {
var cards = shuffle(listOfCards);
deckOfCards.empty();
match = 0;
Moves = 0;
moveNum.text("0");
ratingStars.removeClass("fa-angry").addClass("fa-star");
for (var i = 0; i < cards.length; i++) {
deckOfCards.append($('<li class="card"><i class="fab fa-' + cards[i] + '"></i></li>'))
}
sourceCard();
rewindSec(numberOfSecs);
second = 0;
seconds.text(`${second}`)
clockStart();
};
Here's a link to the project that I'm talking about:
Full Page View: https://codepen.io/idSolomon/full/RYPZNp/
Editor View: https://codepen.io/idSolomon/pen/RYPZNp/?editors=0010
WARNING: Project not mobile-friendly. At least not yet.
If someone can help me out with this, a thousand thank yous will come your way.
Thanks!
You can Change the event of starting the clock at another position
First remove the clockStart() function from the gameStart() method
seconds.text(`${second}`)
//clockStart();
if have added an Extra variable to detect if the clock is started or not
var isClockStarted=false;
The following code will start the timer when a card is clicked:
var sourceCard = function () {
deckOfCards.find(".card").bind("click", function () {
if(!isClockStarted)
clockStart();
The Bellow Code will check if the timer is started or not.
function clockStart() {
if(!isClockStarted){
isClockStarted=true;
numberOfSecs = setInterval(function () {
seconds.text(`${second}`)
second = second + 1
}, 1000);
}
}
I have found that you are not stopping the timer even after the game finishes
If canceled a game it starts timer again //toCheck
I got X DIV (TopRowRight1, TopRowRight2, TopRowRight3...) , each containing a different Google Geochart generated by a php page : GeochartPerProvince.php?template=X.
function getResult(template){
jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
jQuery("#TopRowRight"+template).html(data);
});
}
jQuery().ready(function(){
getResult(1);
setInterval("getResult(1)",10000);
getResult(2);
setInterval("getResult(2)",10000);
getResult(3);
setInterval("getResult(3)",10000);
});
jQuery(function () {
var $els = $('div[id^=TopRowRight]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 5000)
});
Every 5 seconds, i fade out one and fade in the next one. This works perfectly.
For now, the php page in the DIV is refreshed every 10 seconds. This works too.
But what i dream about is that the php page in the DIV is reloaded AFTER the DIV is faded out instead of every 10 seconds. How to do it?
Solved. How it works properly:
function getResult(template){
jQuery.post("GeochartPerProvince.php?template="+template,function( data ) {
jQuery("#TopRowRight"+template).html(data);
});
}
$(document).ready(function(){
getResult(0);
getResult(1);
getResult(2);
//setInterval("getResult(2)",10000); <== keep this piece of code in case of need.
});
$(document).ready(function () {
var $els = $('div[id^=TopRowRight]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
getResult(i);
$els.eq(i).fadeIn();
})
}, 10000)
});
You're already using a callback function after the element has been faded out. So why not call your getResult function inside it?
$el.fadeOut(function(){
// stuff
getResult(i)
})
I have a few suggestions and an example code for you to achieve what you need :
Use $ instead of jQuery for easier reading / writing
$(document).ready is the proper start point for dom related functions
If only one div is visible at a time, do not use too many divs. Most of the time one div is enough for alternating / refreshing content. If there is in/out animation or cross-fading, two divs would be needed. (Example below uses two divs)
Avoid using setInterval except you really really need. Logics with setTimeout better handles unexpected delays such $.post may cause.
start with html code something like this:
...
<div class="top-row-right" style="display:block"></div>
<div class="top-row-right" style="display:none"></div>
...
js:
$(document).ready( function() {
var len = 4; // 'I got X DIV..' This is where we put the value of X.
var template = -1;
function refreshChart() {
template = (template + 1) % len;
$.post("GeochartPerProvince.php?template="+template, function(data) {
var offscreenDiv = ('.top-row-right:hidden');
var onscreenDiv = ('.top-row-right:visible');
offScreenDiv.html(data);
onScreenDiv.fadeOut('slow', function() {
offScreenDiv.fadeIn();
setTimeout(refreshChart, 10000);
});
});
}
refreshChart();
});
I have a little problem with my code.
I have it setup so that by default, a rotating fadeIn fadeOut slider is auto playing, and when a user clicks on a li, it will jump to that 'slide' and pause the slider for x amount of time.
The problem i have is that if the user clicks on multiple li's very fast, then it will run color1() multiple times with will start colorInterval multiple times. This gives a undesired effect.
So what i need help with, is figuring out how to reset my code each time a li is clicked, so whenever ColorClick is clicked, i want to make sure that there are no other instances of colorInterval before i start a new one.
Thanks in advance!
=================================
edit:
I now have another problem, i believe that i fixed the clearInterval problem, but now if you look at var reset, you'll see that it runs color1() each time a li is clicked, which runs multiple intervals, so i need to delete the previous instance of color1() each time it is called, to make sure that it doesnt repeat any code inside multiple times. So when a li is clicked delete any instances of color1()
or
i need that instead of running color1 in var reset, i will go straight to colorInterval instead of running color1() for each li clicked,
so run colorInterval after x amount of time in var reset.
function color1() {
var pass = 0;
var counter = 2;
var animationSpeed = 500;
var $colorContent = '.color-container-1 .color-content-container'
var $li = '.color-container-1 .main-color-container li'
$($li).on('click', function() {
colorClick($(this));
});
function colorClick($this) {
var $getClass = $this.attr("class").split(' ');
var $whichNumber = $getClass[0].substr(-1);
var $Parent = '.color-container-1 ';
pass = 1;
$($colorContent).fadeOut(0);
$($colorContent + '-' + $whichNumber).fadeIn(animationSpeed);
var reset = setTimeout(function() {
clearTimeout(reset);
pass = 0;
color1();
}, 10000);
}
var colorInterval = setInterval(function() {
if (pass > 0) {
clearInterval(colorInterval);
return; //stop here so that it doesn't continue to execute below code
}
$($colorContent).fadeOut(0);
$(($colorContent + '-' + counter)).fadeIn(animationSpeed);
++counter
if (counter === $($colorContent).length + 1) {
counter = 1;
}
}, 7000);
}
You could just clear the interval inside of the click event.
var colorInterval;
$($li).on('click', function() {
clearInterval(colorInterval);
colorClick($(this));
});
//Your other code
colorInterval = setInterval(function() {
//Rest of your code
});
One thing play with is jQuery animations have a pseudo class selector :animated when animation is in progress
if(!$('.your-slide-class:animated').length){
// do next animation
}
I have some code that works, but sometimes it just "jumps" to the other text without respecting the interval.
The code basically changes a header's text on an interval.
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
$("#description").fadeOut("slow");
setInterval(function(){
$("#description").html(text[index]).fadeIn("slow");
$("#description").delay(400).fadeOut("slow");
index++;
if (index == 5) {
index = 0;
};
}, 1800);
If you guys can help me make this work,or even improve it I would be very thankful :)
Fiddle: http://jsfiddle.net/erbfqqxb/
I think the problem may be caused when your interval catches up to the time taken for your delays and fades. Try running each animation in the callback so that it is run as a linear process to keep the text from "jumping":
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
var description = $("#description");
description.fadeOut("slow", changeText);
function changeText(){
// run the initial animation
description.html(text[index]).fadeIn("slow", function() {
// run the second animation after the first one has finished - can remove the delay if you want to
// the delay here is how long you want the text to be visible for before it starts to fade out
description.delay(400).fadeOut("slow", function() {
index++;
//measure against array length instead of hard coded length
if (index == text.length) {
index = 0;
};
//set the delay before restarting animation sequence (only restart once the sequence has finished)
setTimeout(changeText, 400);
});
});
}
Updated fiddle
Just try as below:
setInterval(function(){
//first stop what you are doing and then fadeIn again
$("#description").stop().html(text[index]).fadeIn("slow",function(){
//set a callback to do all these things once fadeIn is completed
index++;
$("#description").delay(400).fadeOut("slow");
if (index == 5) {
index = 0;
};
});
},1800);
I think the problem was with delay. setInterval time and delay time were conflicting. So the above approach seems better to me.
DEMO
I think this happen due to the line
$("#description").fadeOut("slow");
comment that line it will work fine.
Here is the working code and its more dynamic by using
index == text.length
$(function() {
var text = ["text1", "text2", "text3","text4","text5"];
var index = 0;
$("#description").fadeOut();
setInterval(function(){
$("#description").html(text[index]).fadeIn("slow");
$("#description").delay(400).fadeOut("slow");
index++;
if (index == text.length) {
index = 0;
};
},1800);
});
<pre>Use call back function and remove delay</pre>
JSFIDDLE: http://jsfiddle.net/rajen_ranjith/erbfqqxb/3/.
FOr some reason my code is not executing properly. i am trying to program a slideshow with javascript. Im using a for loop to pull and populate the src files from a created array and change the pic every 3 seconds. THe page loads and the first pic is present but when the interval occurs the first pic dissapears and nothing falls in its place. What am I doing wrong?
<img name="mainSlide" id="mainSlide" src="images/mainPagePhotos/facebook-20131027-180258.png" alt="">
var mainSlidePics = ("facebook-20131027-180258.png","IMG_9694116683469.jpg","IMG_28452769990897.jpg");
window.onload = setInterval("mainSlide();", 3000);
function mainSlide() {
for(i=0; i<mainSlidePics.length; i++ ) {
document.images.mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];
}
}
Have you tried getting the Id first?
var mainSlide = document.getElementById("mainSlide");
mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];
also a forloop is a loop that finishes its loops even in one call.
try
var i = 0;
window.onload = setInterval("mainSlide(i);", 3000);
mainSlide(int j){
mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[i];
setInterval("mainSlide(j++);", 3000);
}
First you have to correctly declare the array.
Then you have to move the counter variable outside the function triggered by setInterval.
Then pass the reference of the function to setInterval.
<img name="mainSlide" id="mainSlide" src="images/mainPagePhotos/facebook-20131027-180258.png" alt="">
<script type="text/javascript">
var mainSlidePics = ["facebook-20131027-180258.png","IMG_9694116683469.jpg","IMG_28452769990897.jpg"];
var position = 0;
function changePic() {
position = (position+1) % mainSlidePics.length;
document.images.mainSlide.src = "images/mainPagePhotos/" + mainSlidePics[position];
}
window.onload = function() {
setInterval(changePic, 3000);
};
</script>