We Keep Coding

Have a JS function *constantly* listen for clicks?

This seems like something that should be really simple. I have a few images animating on a page, but I want the user to be able to click on any one of them at any time and then go to a related page.
Problem is, evidently clicks stopped being listened for at some point if I use a loop to search through an array of clickable items. I thought having a function separate from the one that handles the animation would allow it to constantly listen no matter what the animated images were doing, but it seems once the "complete" function is called (for the "animate" function), the function that is listening for clicks (wholly separate from the animation, and using setInterval to listen for clicks) stops listening.
Oddly enough, I believe I did not have this problem when just listening for "img" instead of an array of different images.
Ideas as to what I'm doing wrong? More info needed? I tried to remove any irrelevant code below.
var links = ["#portfolio", "#animations", "#games"];
$(function() {
setInterval(function(){
for (var i=0; i<links.length; i++) {
$(links[i]).click(function(){
window.location.replace("http://www.gog.com");
});
}
}, 500);
});
$(document).ready(function() {
links.forEach(function(current){
//various vars
var link = $(current);
var footer3 = $(".footer3");
var over = true;
var randomTime = 3000*(Math.random()+1);
//dust vars
...
//image vars
var imageUrlShadow = 'images/home/non-char/shadow-pngs/shadow';
var imageUrlCharacter = 'images/home/char-pngs/';
var portfolioSrc;
var animationsSrc;
var gamesSrc;
//animate the characters
link.animate({
top: '0'
}, {
duration: randomTime,
easing: 'easeOutBounce',
step: function(now, tween) {
/*handle shadows*/
...
/*handle characters*/
if (now < -25 && over == false) {
...
} else if (now >= -25) {
...
}
$("#"+ link.data("portfolio")).attr('src', portfolioSrc);
$("#"+ link.data("animations")).attr('src', animationsSrc);
$("#"+ link.data("games")).attr('src', gamesSrc);
/*handle dust*/
var dustDoneMoving = '-50px';
var dustNotMoving = '0px';
//if link is NOT touching footer3
...
//set to "sitting" images when animation is done
complete: function() {
...
setTimeout(function() {
...
}, 1000);
}
})
})
});

var links = ["#portfolio", "#animations", "#games"];
$(function() {
$(links.join(',')).click(function(){
window.location.replace("http://www.gog.com");
});
});
One time only and listener will be attached to the image.

Consider listening via window
var links = ["#portfolio", "#animations", "#games"];
$(window).on('click', links.join(', '), function() {
// do what you wanna
});

I apologize, it turns out that, apparently, the problem was related to the z-index. There were some other divs with 0 opacity "covering up" the array divs.
Setting the z-index to 2 for the array items has fixed the matter. Again, my apologies.

I have modified your code. See, if this works now.
I have added one more array which contains some URLs. So, the intention is that on click of a particular element, its respective URL should be opened.
So, the sequence in these array will matter with respect to each other.
Also, I have made use of 'on', so that 'click' event should be handled even during animation.
var links = ["#portfolio", "#animations", "#games"];
var sites = ["http://www.gog.com", "http://www.gog1.com", "http://www.gog2.com"]; //change these to the expected URLs
$(function() {
for (var i=0; i<links.length; i++) {
$(document ).on("click",links[i],function(){
window.location.replace(sites[i]);
});
}
});

JQuery not executing within a For loop

Im a JQuery noob trying to write a simple jQuery code to get a text to blink three times. My initial code was as follows:
$("#welcome").click(function () {
var i = 1;
while (++i < 10) {
$("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
}
});
But since I probably meddled in forces I could not comprehend, the above code made the text blink only once. I read up on closures and got convinced that the below code could make a change. Unfortunately, it doesnt.
$("#welcome").click(function () {
var i = 1;
while (++i < 10) {
(function (i) {
$("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
})(i);
}
});
Can anyone tell me whats going on here?

You need make use of the animation queue
var $welcome = $("#welcome").click(function () {
var i = 1;
//clear previous animations
$welcome.stop(true, true);
while (++i < 10) {
$welcome.fadeOut("slow").fadeIn("slow");
}
});
Demo: Fiddle

Fading in and out takes some time, and you have to wait for your animation to be over before you can run the next one.
The provided answers solve your problem since jQuery is clever enough to bufferize your animation queue, but it may creates even more confusion for begginers, and also if you want to do something else between the fading animations, you can't rely on it anymore.
You then have to write your code on what is called an asynchronous recursive way (woah). Simply trying to understand that snippet may help you a lot with javascript general programming.
function blink(nbBlinks) {
// Only blink if the nbBlinks counter is not zero
if(nbBlinks > 0) {
$('#welcome').fadeOut('slow', function() {
// Do stuff after the fade out animation
$(this).fadeIn('slow', function() {
// Now we're done with that iteration, blink again
blink(nbBlinks-1);
})
});
}
}
// Launch our blinking function 10 times
blink(10);

This works perfectly. Demo http://jsfiddle.net/X5Qy3/
$("#welcome").click(function () {
for (var x = 0; x < 3; x += 1) {
$("#welcome").fadeOut("slow");
$("#welcome").fadeIn("slow");
}
});
Also, if you know how many times you want to do something. You should use a For Loop. While Loops are for when you don't know how many times you want it to run.

Set in queue
$("#welcome").click(function () {
var i = 1;
//clear animations whcih are running at that time
$(this).stop(true, true);
while (++i < 10) {
$(this).fadeOut("slow").fadeIn("slow");
}
});

You can not use jQuery delay function inside a looping/iteration hence you have to user closures:
$(document).ready(function(){
$(".click1").click(function () {
for (i=0;i<=10;i++) {
setTimeout(function(x) {
return function() {
$("#wrapper").fadeOut("slow", function () { $("#wrapper").fadeIn("slow"); })();
};
}(i), 1000*i);
}
});
});
<div id="wrapper"></div><div class="click1">click</div>
You can later change the count how many times you want to blink the <div>.

I need to run specific code for 3 times only in javascript

I need to animate a sliding with jquery. but only for 3 times. I wrote this code. But this more than 3 times. Please help me to fix or give different codes. Thanks in advance.
$(document).ready (function () {
var i=0;
while (i<3) {
$('a.nextbtn').click (function () {
$('ul.post-cat-sliding').stop().animate({"left": "-=596"},1500);
});
i++;
}
});
and also i have previous button.. so if i click previous button slide should go back.

With your current code you are actually attaching 3 click-events with a single button rather than limiting it to three clicks. So with current code I think your slider will be passing 3 slides with one click.
Try the code down-below:
$(document).ready (function () {
var i=0;
$('a.nextbtn').click (function () {
if(i < 3) {
$('ul.post-cat-sliding').stop().animate({"left": "-=596"},1500);
i++;
}
});
});

The for(var i = 0; i < 3; i++) might seems a little too verbose.
Maybe you might like some of these approaches:
for(i in [1,2,3]){
console.log('three times')
}
or
for(i in new Array(3).fill()){
console.log('three times')
}
or
for(i in '...'.split('')){
console.log('three times')
}

I'd use a for loop instead:
$(document).ready(function(){
$('a.nextbtn').click (function(){
for(var i = 0; i<3;i++)
{
$('ul.post-cat-sliding').stop().animate({"left": "-=596"},1500);
}
});
});
EDIT: Was only conserned with the looping when I read the post. If you want the animation to run 3 times when the nextbtn is clicked you should use the above code. You can reuse the code with a.prevbtn

How to create a looped animation with JQuery

I have been sitting on this for a few hours and cannot figure this out. I am trying to create an slideshow (3 slides) that loops endlessly. Each slide is a li inside #slideshow. I have walked through this with a debugger and all variables get set correctly, but I don't understand why the animations dont actually happen. I have this which ends up displaying all images on the page:
$(document).ready(function() {
$slideshow = $('#slideshow');
$slideshowItems = $slideshow.find('li');
$slideshowItems.hide();
nextI = function(x) {
if ((x+1) < $slideshowItems.length) {
return x+1;
}
else {
return 0;
}
}
animation = function(i) {
$slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, animation(nextI(i)));
}
animation(0);
If I do:
$slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500,
$slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500,
$slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500));
This works as expected, but it seems ugly and does not loop.
Any idea why I can't get this to work? I feel it is something with my expectations of how JQuery/ JS modifies the DOM or the sequence that the browser uses to execute animations. Thank you for the help!

var $slideshowItems = $('#slideshow').find('li'),
i = 0;
(function loop() {
$slideshowItems.eq( i ).fadeIn(500).delay(1000).fadeOut(500, loop);
i = ++i % $slideshowItems.length;
})();
JSFIDDLE DEMO

You should specify a callback method but your "animation(nextI(i))" returns nothing, so nothing remains to do after the fade out is complete.
Something like this I think will work:
var animation = function(i) {
$slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
animation(nextI(i));
});
}

I would try setting that as a function and then using setInterval:
setInterval(function(){
$slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, function() {
$slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500, function() {
$slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500);
});
});
}, 6000); // 6000 milliseconds before loops

jQuery function attr() doesn't always update img src attribute

Context: On my product website I have a link for a Java webstart application (in several locations).
My goal: prevent users from double-clicking, i. e. only "fire" on first click, wait 3 secs before enabling the link again. On clicking, change the link image to something that signifies that the application is launching.
My solution works, except the image doesn't update reliably after clicking. The commented out debug output gives me the right content and the mouseover callbacks work correctly, too.
See it running here: http://www.auctober.de/beta/ (click the Button "jetzt starten").
BTW: if anybody has a better way of calling a function with a delay than that dummy-animate, let me know.
JavaScript:
<script type="text/javascript">
<!--
allowClick = true;
linkElements = "a[href='http://www.auctober.de/beta/?startjnlp=true&rand=1249026819']";
$(document).ready(function() {
$('#jnlpLink').mouseover(function() {
if ( allowClick ) {
setImage('images/jetzt_starten2.gif');
}
});
$('#jnlpLink').mouseout(function() {
if ( allowClick ) {
setImage('images/jetzt_starten.gif');
}
});
$(linkElements).click(function(evt) {
if ( ! allowClick ) {
evt.preventDefault();
}
else {
setAllowClick(false);
var altContent = $('#jnlpLink').attr('altContent');
var oldContent = $('#launchImg').attr('src');
setImage(altContent);
$(this).animate({opacity: 1.0}, 3000, "", function() {
setAllowClick(true);
setImage(oldContent);
});
}
});
});
function setAllowClick(flag) {
allowClick = flag;
}
function setImage(imgSrc) {
//$('#debug').html("img:"+imgSrc);
$('#launchImg').attr('src', imgSrc);
}
//-->
</script>

A delay can be achieved with the setTimeout function
setTimeout(function() { alert('something')}, 3000);//3 secs
And for your src problem, try:
$('#launchImg')[0].src = imgSrc;

Check out the BlockUI plug-in. Sounds like it could be what you're looking for.
You'll find a nice demo here.

...or just use:
$(this).animate({opacity: '1'}, 1000);
wherever you want in your code, where $(this) is something that is already at opacity=1...which means everything seemingly pauses for one second. I use this all the time.

Add this variable at the top of your script:
var timer;
Implement this function:
function setFlagAndImage(flag) {
setAllowClick(flag);
setImage();
}
And then replace the dummy animation with:
timer = window.setTimeout(function() { setFlagAndImage(true); }, 3000);
If something else then happens and you want to stop the timer, you can just call:
window.clearTimeout(timer);