Develop Reference

Using jQuery to countdown from 90 seconds beginning on the click of an element

Hi I was wondering if anyone can help me. I am trying to create a simple card game using html css and javascript. It has a 90 second timer which I want to start counting down on the first click of the card.
Any ideas how to do this?
Thank you!!

If you want to run a function after 90 seconds then
element.onclick = function () {
setTimeout(myFunctionAfter90Secs, 90 * 1000);
};
And you would define element to be the element that's clicked on (use a querySelector) and define your myFunctionAfter90Secs
If you want to display a timer then:
Html:
<div id="timer"></div>
<div id="card"></div>
<script>
var timer = document.querySelector("#timer");
var card = document.querySelector("#card");
var initialSeconds = 90;
card.onclick = function () {
var myInterval = setInterval(function() {
if (initialSeconds > -1) {
timer.innerHTML = initialSeconds;
initialSeconds--;
}
else {
clearInterval(myInterval);
}
}, 1 * 1000);
};
</script>
This will make sure your timer updates every second until it hits 0, then the reset should clear your interval but feel free to tweak the code to fix it

How to Delay The First FadeIn Event On Slider

I am currently modifying this piece of code as apart of a project, it works fine for what I need it to do, however I want a relatively short transition period,but the initial div element only display for a brief moment and the fade process starts.
I was wondering if anyone could help me to correct this. Ideally I would like to set the initial slider timeframe or delay it from triggering the process,
var divs = $('.fade');
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
current.stop().fadeOut(500, function() {
$(this).removeClass('current');
setTimeout(fade, 5000);
});
next.stop().fadeIn(500, function() {
$(this).addClass('current');
});
}
fade();

To delay the function fade() from starting right away just do:
var divs = $('.fade');
function fade() {
....
}
setTimeout(fade, 5000); //here is the only change
At the end of your code fade() is executed right away. Just add a timeout to it. 5000 is in milliseconds, just switch that to the delay time you want.
Apart from your question, if you wanted to apply the fade function to objects only after you clicked them, you could do this.
$('.fade').on('click',function(){//instead of click you could use any event ex. mouseover
fade();//call fade function
});

How do I remove a dynamically added element after 5 seconds?

I'm making a simple game where users should click flies to remove them from the screen. The user should not click the cat when it drops, and I'm hoping to make the cat gif disappear (remove itself from the DOM) after 5 seconds.
I apologize if this has been answered before. I'm having a hard time solving this as my experience is very limited. This is my first question/post ever. Thanks for any and all feedback :)!
$('.square').each(function(i){
if (($('.square').eq(i)).has(".cat")){
setTimeout(function(){
$('.square').eq(i).find('img').remove();
}, 5000);
};
^this is the code I tried to write... the .square class are the squares that make up the table like grid of divs... and the .cat class refers to an image dropped.
The problem is multiple cats can be dropped on the screen at the same time.
I need the page to recognize when a cat is dropped, set a timeout for 5 seconds when that occurs, and then remove that particular cat from the page after 5 seconds.
Thanks for the help :)!
var randomize = function (x) {return Math.floor(Math.random()*x)};
var startFunk = function(){
setTimeout(function(){
$('.square:empty')[randomize(($('.square:empty').length))].innerHTML = dropArray[randomize(dropArray.length)];
startFunk();
}, 500);
};

May help
$('.square').each(function(i){
if ($(this).find('.cat').length > 0){
$(this).find('.cat').delay(5000).fadeOut(0, function(){
// change ..^... with img
$(this).remove();
});
}
});
DEMO Here

var startFunk = function () {
setTimeout(function () {
var sqr = $('.square:empty')[randomize(($('.square:empty').length))];
sqr.innerHTML = dropArray[randomize(dropArray.length)];
sqr.has('.cat').delay(5000).empty();
startFunk();
}, 500);
};
And get rid of the $('.square').each(function(i){... part.

show and hide with delays on a loop but no animation

I have a jsfiddle for this
Jsfiddle
The problem is, I am trying to create a script that ones a button is clicked flashes an image (car lights) on and off for a period of time. It works fine, but in IE8 since the lights are png the animation for it is causing a black background and border as it blinks on and off. So I trying to duplicate the same thing, but without using animation.
In my jsfiddle, the first function for the first click div represents what i am trying to do without animation, but it is not repeating. The code:
$('.oneD').click(function(){
for (var i = 0; i <= 9; i++) {
$('.oneP').show();
setTimeout(function(){
$('.oneP').hide();
}, 1000);
}
});
The 2nd function is the one I already created that does work, but it has the animation:
$('.twoD').click(function(){
for (var i = 0; i <= 9; i++) {
$(".twoP").fadeIn(1000, function () {
$(".twoP").hide();
});
}
});
Keep in mind that the jsfiddle is just a simple mock not using images. I am just looking for the functionality in which i can incorporate this. I appreciate your time in helping me with this.

instead of setTimeout() use setInterval() and clearInterval() like this:
$('.oneD').click(function(){
$('.oneP').show();
var interval = setInterval(function(){
$('.oneP').hide();
}, 1000);
//*after a number of time or loop
interval.clearInterval();
});
setInterval() "Loop" throught the function it is given every number of millisecond you pass it. and clearInterval() stop the "Loop".

I'd do it like this :
$('.oneD, .twoD').on('click', function(){
for (var i=0; i<9; i++)
$('.'+this.className.replace('D', 'P')).delay(1000).show(0)
.delay(1000).hide(0);
});
FIDDLE
This uses a selector for both elements and the same event handler, then swaps out the D for a P in the showing and hiding.
As for using delay() and making this work, hide() and show() will work just as the animated jQuery methods if a value for the duration is passed, even if that value is zero.

Fiddle here: http://jsfiddle.net/HxFpr/
var i;
$('.twoD').click(function(){
i = 0;
loopFlash();
});
function loopFlash(){
if(i < 10){ // flash 5 times (1 on 1 off = 2 cycles)
$('.twoP').toggle();
var flashing = setTimeout(loopFlash,500);
}
i++;
}

Yet another solution for you.
No Animation - with single interval
With animation - pure jQuery
http://jsfiddle.net/x6Kpv/6/
var noAnimationHandler = function() {
setInterval(function() {
var $el = $('.oneP');
$el[$el.is(":visible") ? "hide" : "show"]();
}, 800);
};
var animationHanddler = function() {
$('.twoP').fadeIn(300, function() {
$(this).delay(150).fadeOut(300, animationHanddler);
});
}
$('.oneD').click(noAnimationHandler);
$('.twoD').click(animationHanddler);
Thanks

Javascript jump between intervals

Ok so , i'm trying to build a custom slideshow with javascript, but i would like to put a custom pause interval for each slide .
let's say i have a slideshow with 3 slides i want it to be like :
30 seconds 8 sec 8 sec
|-------------------|------|-------|
slide 1 slide2 slide3
I want to be able to give a function a list of intervals [5 , 10 , 20] and shuffles a list of slides using that interval list.
I did try to solve this using setInterval with fun , but unfortunately it'sctions calling the next function but as you know it's not scalable to many slides,
Code
// slid is a class having all slides
function bringback() {
slid.goToSlide(0);
}
function bringback2() {
slid.goToSlide(2);
setTimeout( bringback, 8000 );
}
$(document).ready(function(){
setInterval(function(){
slid.goToSlide(1);
setTimeout( bringback2, 8000 );
}, 30000);
});

Use setTimeout:
;(function(){
var intervals = [5,10,20];
(function update(next){
// Pick a slide and update the slideshow here
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();
Demo
You could make it choose a random slide or just iterate through the slides in order, like so:
;(function(){
var intervals = [5,10,20];
(function update(next){
slid.goToSlide(next);
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();